zoukankan      html  css  js  c++  java
  • JS中setTimeout和setInterval的使用

    之前在别的论坛问了个问题,那个时候对setTimeout和setInterval不懂,而那个时候也一直以为这两个的作用是一样的,最近才算真正的了解这两个的区别,今天就记录下这两个的区别,

    阅读目录:

      1.setTimeout介绍
      2.setInterval介绍
      3.总结

    setTimeout介绍

    JavaScript是单线程语言,但它可以通过setTimeout和setInterval来调度代码在特定时间执行。setTimeout是在指定时间后执行代码,而setInterval是在每隔指定时间就执行一次代码。

    var i=0;
    setTimeout(function(){
        console.log('这是第%s次', i++);
    }, 1000);
    
    //结果
    这是第0次
    View Code

    setTimeout可以叫超时调用,到了时间就调用,他需要传递两个参数,第一个参数可以是一个引起来的代码串也可以是一个函数,第二个传递一个数字表示超时的时间,毫秒为单位。

    之前我在这里问了一个问题:http://cnodejs.org/topic/51ff717a44e76d216afe24e8之前不明白,现在明白了。

    JavaScript是一个单线程序的解释器,因此在一定时间内她只能执行一段代码,为了控制要执行的代码,就有一个JavaScript任务队列,这些任务会按照他们添加到队列的顺序执行。setTimeout的第二个参数会告诉JavaScript再过多久时间把当前任务添加到队列中,如果队列是空的,那么添加的代码可以立即执行,如果队列不是空的,那么他要等前面的代码执行完毕在执行。

    所以有时候我们使用setTimeout的时候时间不太准确!我上面的提问就是很好的例子,

    调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个ID是计划执行代码的唯一标识,可以通过此ID取消超时调用,如:

    var i=0;
    
    var timer = setTimeout(function(){
        console.log('这是第%s次', i++);
    }, 5000);
    
    clearTimeout(timer);   //这里就可以取消

    当然使用clearTimeout必须在超时调用之前,如果超时调用执行过了,再调用这个就没有用了。

    setInterval介绍

    setInterval可以称作间歇调用,他会按照指定间隔时间重复执行代码,直至间歇调用被取消。他的参数含义和setTimeout一模一样。如:

    var i=0;
    
    setInterval(function(){
        console.log('这是第%s次', i++);
    }, 1000);
    
    //结果
    这是第0次
    这是第1次
    这是第2次
    这是第3次
    这是第4次
    这是第5次
    这是第6次
    这是第7次
    ........

    调用setInterval()方法同样会返回一个间歇调用ID,也可以通过clearInterval()方法来取消此ID间歇调用。

    在刚才上面的例子中也可以通过setTimeout来实现:

    var i=0;
    
    function time(){
        console.log('这是第%s次', i++);
        setTimeout(time, 1000);
    }
    
    setTimeout(time, 1000);
    
    //结果
    这是第0次
    这是第1次
    这是第2次
    这是第3次
    这是第4次
    这是第5次
    这是第6次
    这是第7次
    ......
    View Code

    效果是一样的。

    总结

    一般认为,使用超时调用setTimeout来模拟间歇调用setInterval是一种最佳的模式。因为每次使用setTimeout之后如果不在设置另一次超时调用,调用就会自动停止,而setInterval却会一直执行。在开发中很少真正使用setInterval,因为后一个间歇调用可能会在前一个间歇调用结束前调用,而setTimeout却可以避免这个问题,但是setTimeout的使用不好也会出现这个问题,我上面的提问就非常好的说明了这个问题,有时候真的是技术能力的问题导致的,和技术无关。

  • 相关阅读:
    LeetCode(287)Find the Duplicate Number
    LeetCode(290) Word Pattern
    LeetCode(205)Isomorphic Strings
    LeetCode(201) Bitwise AND of Numbers Range
    LeetCode(200) Number of Islands
    LeetCode(220) Contains Duplicate III
    LeetCode(219) Contains Duplicate II
    命令行执行Qt程序
    LeetCode(228) Summary Ranges
    redis 的安装和使用记录
  • 原文地址:https://www.cnblogs.com/Dn9x/p/3491992.html
Copyright © 2011-2022 走看看