相关文章推荐


今天来说说超时,我们先来简单介绍下:

说到超时,时延,我们知道有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;//重置
ios 音乐播放器开发 ios smb 音乐播放器

闲来无事,准备自己写一个简单的音乐播放器玩玩首先我想到的是,如果只是自己用的话,用户名密码应该不需要的吧,但是这样就体现不出是我自己用的了,所以我准备设置一个登陆账号,只有用自己的登陆账号登陆的时候才会有一些特殊的权限。那么我们首先来创建一个登陆界面,类似于这样。这个界面搭建也很简单,就直接上代码了// // ViewController.h // ZQMusic // Created

 
推荐文章