前端开发:setTimeout与setInterval 定时器与异步循环数组

  1. 云栖社区>
  2. 博客>
  3. 正文

前端开发:setTimeout与setInterval 定时器与异步循环数组

grootzhang 2016-06-13 14:20:00 浏览316 评论0

摘要:             前端开发:setTimeout与setInterval 定时器与异步循环数组 前言:   开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的,在与博友的分享中可以学到新的知识、得到先驱者的指正、解决工作中遇到的难题。

            前端开发:setTimeout与setInterval 定时器与异步循环数组

前言:

  开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的,在与博友的分享中可以学到新的知识、得到先驱者的指正、解决工作中遇到的难题。近一个月工作繁忙,新的文章也迟迟未写,今天呢,过来深入了解一下 关于javascript定时器的知识;

setTimeout与setInterval简述

  

setTimeout与setInterval使用方法基本相同,他们接受两个参数,第一个参数是需要执行的函数,第二个参数是执行的延迟时间,看栗子:

setTimeout(function(){
    alert("hello");  //第一个参数为函数 你可以传入函数名 或一个匿名函数
},3000);       //第二个参数为延迟时间  标识多少毫秒之后执行前一个函数

setInterval(function(){
    alert("hello");
},3000);

 

setTimeout与setInterval唯一不同的是,setTimeout在指定的延迟时间到达后 向ui队列添加一个任务,函数会立即执行,setInterval则是在指定的延迟时间不断的向ui队列添加执行任务,如果你没有手动清除那么setInterval就会一直执行下去,直到页面被关闭,如果ui队列中存在由同一个setInterval创建的任务,那么后续任务将不会被添加到ui队列中。

通俗的说就是,让一个函数在指定时间之后再执行,和让一个函数在指定时间一直执行;

然而它在实际项目中有什么作用呢,我们可以利用setInterval制作定时幻灯片、实时数据更新、新闻列表滚动、jQuery的.animate()方法就是依靠定时器模拟动画效果;此博客实现了这一代码,贴在下面与大家一起讨论:  http://www.cnblogs.com/slowsoul/archive/2013/02/21/2921354.html   JavaScript——创建运动框架

 

 

提到定时器,就不得不先介绍一个JavaScript运行机制--》浏览器UI线程

用于执行javascript和更新用户界面的进程通常被称为“浏览器UI线程”

  在浏览器中,Javascript执行与UI更新是发生在同一个进程(浏览器UI线程)中的。UI线程的工作基于一个简单的队列系统,任务会被保存到队列 中直到进程空闲时被提取出来执行。所以Javascript的执行会阻塞UI更新;反之,UI更新也会阻塞Javascript的执行。给用户的表现就是 浏览器在工作时短暂或长时间失去反应,用户的操作不能及时得到响应。而UI线程的阻塞很多时候是由于我们要在代码里进行长时间的脚本运算,超过了浏览器限 制,导致浏览器失去响应,冻结用户界面。传送门: Javascript之UI线程与性能优化

使用定时器可以异步处理需要大量运算的任务,它可以适时的避免ui更新与javascript执行之间的冲突

例如在某种极端环境下:

for(var i=0;i<5000;i++){
    document.body.innerHTML += "hello"+i;
}

 

这段代码向body插入字符串   持续运行了五千次,在谷歌浏览器中这段代码会执行3秒左右 而这段时间页面始终是空白且不可操作的,这是一个非常常见的性能问题,在处理大量运算的时候,我们可以利用延迟执行将代码分成几段分别运行,可以有效改善代码执行速度,并且因为它是异步的 在执行中的空隙,ui会启动更新,因此并不会导致页面空白,用户体验提高;

 

setTimeout(function(){
    for(var i=0;i<2500;i++){
        document.body.innerHTML += "hello"+i;
    }
//分段处理 五千次分成两段 setTimeout(
function(){ for(var i=0;i<2500;i++){ document.body.innerHTML += "hello"+i; } },100); },100);

 

 

 

 

假如向服务器请求一个超长的新闻列表,由于数据量过去庞大,单个循环解析数据持续时间过长,那么可以使用定时器分解任务,异步处理数据

一般情况下,我们处理数据都是这样的:

for(var i=0,len=msg.length;i<len;i++){
 process(msg[i])       
}

一般我们使用for或者while循环解析数据, 这样的问题是 在执行完成之前我们是没有办法控制页面的,数据越庞大越明显

 

使用定时器分解任务

使用定时器分解任务有两个前提

  1.数据的处理不需要按照特定的顺序

  2.是否必须同步处理,如果必须同步处理那么定时器不适用;

其核心理论是,每间隔一段时间(通常是30毫秒,视情况而定)执行当前项的处理函数;

封装之后的代码:

volist:function(name,id,callback,time){
//settimeout 异步循环 name为需要循环的array对象 id为要执行的解析函数  time设置每次运行的时间
        if(time==undefined){time=30;};
        var fattr = name.concat();//克隆数组
        setTimeout(function(){
            if(fattr.length>0){
                id(fattr.shift());  //执行每一个数组项运行的函数
                setTimeout(arguments.callee,time);
            }else{
                callback();//执行结束 回调函数
            }
        },time);//异步调用时间  默认30 
    }

 

还有另一种使用方式,将函数放在数组里,异步循环调用,将要执行的多个任务拆分成不同的子任务,分阶段分别执行:

function fun1(){
    alert(1)
}
function fun2(){
    alert(2)
}
function fun3(){
    alert(3)
}
var farr = [fun1,fun2,fun3];  //将任务存储到数组中 setTimeout(function(){ if(farr.length>0){ var func=farr.shift(); //取出 func(); //执行函数 setTimeout(arguments.callee,300); }else{ alert("执行完成") }
},
300); //300秒执行一次

 

定时器的性能问题

  需要注意的是,当一个页面中存在多个定时器,他们执行的任务过多,往往会导致不可预料的问题;解决方法就是尽量避免创建多个定时器,只创建一个独立的定时器,让它分别执行不同的任务,另外每次调用setInterval()之前应清除前面已经无用的setInterval,或者是防止重复指定setInterval

var timer
//先清除
clearInterval(timer);
//再调用
  timer = setInterval(function(){
    ......
},5000);

 

总结

  合理使用定时器无疑能够增加页面的整体性能,在处理不需要同步,不需要顺序执行的任务时,可以考虑使用setTimeout代替for循环  异步处理任务;

 

---------------------------------------时间不曾停下它的脚步,你又怎么可以止步不前---------------------------------------

 

  我的微信号:    qq:

 欢迎各种技术讨论,如果您有建站需求,欢迎联系;

 (转载请注明出处)

 

======================================================== 转载请注明出处。
【云栖快讯】阿里巴巴小程序繁星计划,20亿补贴第一弹云应用免费申请,限量从速!  详情请点击

网友评论