JavaScript定时器的几种方法

时间:2021-12-13 03:22:12

  JavaScript定时器无非就是使用setTimeout和setInterval方法,我们以间隔1秒依次输出1,2,3,4,5为例总结几种不同的写法:



一、使用闭包

   一种常用的方法就是在for循环中使用立即执行表达式(IIFE)来创建一个闭包作用域。代码如下:
 for (var i = 1; i <= 5; i++) {
       (function (i) {
          setTimeout(function () {
               console.log(i);
           }, i * 1000)
        }(i))
 }


二、借用let实现

   在ES6中,定义了关键字let,let可以将变量绑定到所在的任意作用域中,即let为其声明的变量隐式劫持了所在的块作用域;let发挥优势的一个典型的例子就是在for循环中,在for循环头部let声明的的变量,for的每一次循环都会重新声明,并赋予上一轮循环结束的值。所以上边的例子也可以这么写:
for (let i = 1; i <= 5; i++) {
      setTimeout(function () {
        console.log(i);
      }, i * 1000)
}


三、使setInterval实现

   由于setInterval函数自身的一些性能问题,实际当中很少用,但是本问题这样的简单例子,用该函数也是一种实现方法,代码如下:

var i = 1;
var Id = setInterval(function () {
         if (i == 6) {
            clearInterval(Id);
         } else {
            console.log(i);
            i++;
         }
 }, 1000)