今天来说说超时,我们先来简单介绍下:
说到超时,时延,我们知道有setTimeout和setInterval方法,这两个写法差不多;
两者大致的写法:
setTimeout(code,毫秒)
setInterval(code,毫秒)
只是setTimeout方法只执行一次,setInterval是隔一段时间执行一次。
setTimeout
可以写成:
//3秒执行alert弹框
setTimeout( "alert('对不起, 三秒钟已到')" , 3000 )
也可以时延直接调用某方法:
//有个方法
function fangfa(){
//方法区
alert(“hello”)
//3秒执行该方法
setTimeout( this.fangfa , 3000 )
不能写成,就是不能直接输出字符串:
//错误写法,会报错
setTimeout( "hello" , 3000 )
我们可以把方法进行合并:
setTimeout(
function(){
//方法区
alert("Hello");
, 3000);
但这种写法,如果再VUE里就不能时延this,我们可以改写成:
setTimeout(
e => {
//方法区
this.alert("Hello"); ;
,3000);
setInterval
这个写法同上面类似,setTimeout改成setInterval就行。略
基于webscoket时延处理
我们在发送请求的时候,有几种可能:1.对方没回;2.自己发送失败,对方没有收到;
这时候我们其实一直在等待,但是等多久?我们要给出超时提示。
这里大家会觉得使用setTimeout不就行了,没错,直接使用setTimeout,但是呢,实测中,如果你直接使用setTimeout,无论你超不超时,setTimeout它都会执行。
setTimeout(
e => {
this.loading = false//设置一个加载
this.$message({
showClose: true,
message: '发送超时,请重新操作',
type: 'error'
,30000);
但这个不是我们要的效果,我们需要的是超时才执行它,不超时就不执行。这个可能有的会有好几种办法,但是百度了下,没有看到相同的做法。
有个方法是,做个心跳监测,但是这个需要后端配合,可是后端不配合,这种抛弃。感兴趣的可以参考:
我的想法是,我们在发送的时候,设置setTimeout,如果对方回复了,那么我们就可以取消setTimeout这个定时器,这里用到clearTimeout方法。
clearTimeout
这个网上的写法是:
var chaoshi = setTimeout( "alert('对不起, 三秒钟已到')" , 3000 )//3秒执行alert弹框
//清除定时器
clearTimeout(this.chaoshi);
但是我在VUE中我很纳闷,chaoshi这个是什么类型?所以多次尝试下VUE的完整写法:
data() {
return {
chaoshi:null,//存放setTimeout的
methods:{
发送方法(){
//发送请求方法里
this.send(请求内容)//假设这是发送的请求
this.loging = true;//如果你设置加载中的页面用这个element加载组件
setTimeout(
e => {
this.loading = false//加载解锁
//超时后提示语
this.$message({
showClose: true,
message: '发送超时,请重新操作',
type: 'error'
,30000);
接收方法(){ //假设这里是你专门接收后端返回数据的地方
//接收内容
this.loading = false; //接收到内容肯定是解锁加载
clearTimeout(this.chaoshi);
this.chaoshi = null;//重置下这个
}
上面这个是局部的位置,如果你的整个项目基于webscoket发送请求(主方法,全局),或者其他也行,让所有请求都等待后端回复,如果后端长时间不回复,就给出提示
在请求发送时,跟上面一样类似,只要找到发送的方法里添加setTimeout,在接收方法里取消。
例子:webscoket里的发送方法是:
sendSock(agentData, callback) {
//超时处理,如果对方不回复就超时
this.chaoshi = setTimeout(
e => {
this.loading = false
this.$message({
showClose: true,
message: '发送超时,请重新操作',
type: 'error'
,30000);
//其他方法
}
webscoket里的接收方法是:
websocketonmessage(revData) { // 数据接收
console.log("接收到的数据:", revData);
//对方回复后,清除超时。
clearTimeout(this.chaoshi);
this.chaoshi = null;
}
附加案例
还有一种加载方式
data{
retrun[
loading:{},
}
设置加载
this.loading = this.$loading({
lock: true,
text: '加载中,请稍候...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
关闭加载,这个你可以在各种场景加,如收到后台数据,就关闭它
this.loading.close()//关闭加载
加载超时,如果没有收到后台数据,也不可能一直加载,超出多久后就超时,利用之前讲得方法,把它们写在一个位置。
this.loading = this.$loading({
lock: true,
text: '加载中,请稍候...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
//超时就自动取消
this.refreshData = setTimeout(
e => {
this.loading.close(),//关闭加载
//给出超时提示
this.$message({
showClose: true,
message: '加载中,请检查网络或重新操作',
type: 'error'
,60000)//设置60秒时间
如果没有超时,要记得把超时取消,否则还会弹超时
clearTimeout(this.refreshData);//清除超时
this.refreshData = null;//重置