关于javascript中setTimeout和SetInterval

作者：Terry2016.05.25来源：Web前端之家浏览：18319评论:0

关键词：setTimeout SetInterval

有时候整理一篇文章，取个标题好难。最近做了几个动画的项目，运用JS和CSS3实现，期间会出现多次触发JS动画问题，如何解决呢，这就是我们今天要讨论的话题：关于javascript中setTimeout和SetInterval。

为了能找到更好的方法，在网上看过不少的信息，以下就是我整理出来的一些对两者的见解。

认知setTimeout和SetInterval

setTimeout这个方法相信很多初学者都有过误解：让JS从现在开始，经过指定的时间后，执行相应的函数。

从方法名和大部分现象来看，很容易产生以上的误解。在我们理解了JS主线程的特点后，知道了它会优先完成同步任务，在同步任务执行过程中，不会执行其它任务。

实际上，setTimeout做的事情是：在指定delay时间后，将指定方法作为异步任务添加到异步任务队列中。

所以，如果setTimeout的定时到了执行时间，JS主线程仍然还在执行同步任务，setTimeout所指定的方法并不会立刻执行。
更惨的是，即使JS主线程执行完了同步任务，也不一定会执行setTimeout指定的方法，因为异步任务队列中可能有更早加入的异步任务。

最惨的是，即使天时地利人和，到了定时的时间时，JS主线程空闲，异步任务队列中只有setTimeout执行的方法，这个方法的执行时间也并不是精确的delay时间（精确到毫秒），因为浏览器上的计时器精确度有限。

纵使setTimeout有些不尽人意，但这些瑕疵在大部分情况下，用户无法感知出来。

SetInterval也可以设置JS里元素延时显示。

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象

使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。

它们的原型如下：

window.setTimeout(expression,milliseconds);

window.setInterval(expression,milliseconds);

其中，expression可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。

两个方法的第二个参数是milliseconds，表示延时或者重复执行的毫秒数。下面分别介绍两种方法。

1．window.setTimeout方法

该方法可以延时执行一个函数，例如：

<script language="JavaScript" type="text/javascript">
<!--
    function hello(){ alert("hello"); } window.setTimeout(hello,5000);
//-->
</script>

这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为： window.setTimeout("hello()",5000); 读者可以体会它们的差别，在window.setInterval方法中也有这样的性质。如果在延时期限到达之前取消延执行，可以使用window.clearTimeout(timeoutId)方法，该方法接收一个id，表示一个定时器。这个id是由setTimeout方法返回的，例如：

<script language="JavaScript" type="text/javascript">
<!--
    function hello(){      
        alert("hello");
    }
    var id=window.setTimeout(hello,5000);
        document.onclick=function(){     
        window.clearTimeout(id);
     }
//-->
</script>

2．window.setInterval方法

该方法使得一个函数每隔固定时间被调用一次，是一个很常用的方法。如果想要取消定时执行，和clearTimeout方法类似，可以调用 window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如： //定义一个反复执行的调用 var id=window.setInterval("somefunction",10000); //取消定时执行 window.clearInterval(id); 上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法。

具体应用

除了点击这种单次事件，浏览器上有一些会疯狂触发的事件，例如onreaize事件。如果给这个事件绑定了处理函数，在浏览器窗口大小改变的时候会很高频地触发处理函数。如果处理函数中有DOM操作的话，对页面性能影响会很大，尤其是在IE浏览器中，甚至可能让浏览器崩溃。

如果你实在需要在这类事件上绑定操作DOM的函数，那么可以考虑一下限制一下事件执行的时间间隔，至少不要那么频繁。至于设置多少时间间隔，看具体场景和需求。以下代码是利用setTimeout来实现事件执行频率控制：

/**
 * 限制method执行频次，当方法100ms之内没有
 * 再次被调用时，才执行method方法
 * @param  {function} method  被限制的方法
 * @param  {Object} context method执行的上下文
 */function throttle(method, context){
    clearTimeout(method.tid);
    method.tid = setTimeout(function(){
        method.call(context);
    }, 100);
        }function fnResize() {
            console.log(111);
        }window.onresize = function() {
            throttle(fnResize);
        }

案例1

有这样一个需求：设计给了一个gif动画，gif本身是单次播放的。产品要求页面加载时动画播放一次。后续用户只要鼠标hover到动画上，动画就重新播放一次。利用搜索引擎的强大功能，很快找到了实现方案：

$logo.on('mouseenter', function() { // hover时重新播放gif动画
    var $logoImg = $(this).find('img');
    $logoImg.attr('src', ''); // 将img的src置为空
    $logoImg.attr('src', _opt.logoImg); // 重新设置src为gif链接，以实现重新播放
});

在chrome等浏览器上验证没问题后，按照惯例，在IE上出问题了。。。gif并没有重新播放一次。
当时想的是，可能是IE反应太慢了，在src属性重置的那个间隔内，没有意识到这一点。于是就尝试加了个setTimeout，把重新设置src的操作丢到了异步任务队列中。

$logo.on('mouseenter', function() { // hover时重新播放gif动画
    var $logoImg = $(this).find('img');
    $logoImg.attr('src', '');
    setTimeout(function() { // IE下要这样搞，不然不能重新播放动画
        $logoImg.attr('src', _opt.logoImg);
    }, 0);
});

案例2

经常有这种场景：监控input或者textarea中文本的变化，然后触发某个事件处理程序。考虑到除了键盘输入，还有鼠标的粘贴和剪切操作，比较完整的监控输入内容改变的方法是：

// 响应键盘输入，粘贴和剪切事件
$('#input').on('keyup paste cut', function() {
    console.log($(this).val());
});

以上代码在键盘输入场景下，能够在控制台输入最新的输入框内文本。但是当使用鼠标右键操作进行粘贴或剪切时，控制台输入的文本内容是操作前的旧内容。为了获取操作后的新文本内容，可以将对文本的获取和处理放在setTimeout中延时执行：

// 响应键盘输入，粘贴和剪切事件
$('#input').on('keyup paste cut', function() {
    var $this = $(this);
    setTimeout(function(){ // 使鼠标粘贴和剪切时，输入框内内容为最新
        console.log($this.val());
    }, 0)
});

以上2个案例代码简单且有代表性。在最近做的项目中，做过比较复杂的动画，今天在这里就不贴出来了，后面会单独针对动画写一些代表性的文章，有兴趣的关注本网站。