Javascript之超时调用和间歇调用

简介

• JavaScript 是一个单线程序的解释器，一定时间内只能执行一段代码
• JavaScript 维护了一个任务队列。这些任务会按照将它们添加到队列的顺序执行

超时调用-setTimeout

在指定的时间过后执行代码

• setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中(并不一定会立即执行)
• 如果队列是空的，那么添加的代码会立即执行
• 如果队列不是空的，那么它就要等前面的代码执行完了以后再执行
• 调用 setTimeout() 之后，该方法会返回一个数值 ID，表示超时调用。这个超时调用 ID 是计划执行代码的唯一标识符，可以通过它来取消超时调用
• 要取消尚未执行的超时调用计划，可以调用 clearTimeout() 方法并将相应的超时调用 ID 作为参数传递给它

// 设置超时调用
var timeoutId = setTimeout(function() {
  console.log("Hello world!");
}, 1000);

// 注意：把它取消
clearTimeout(timeoutId);

间歇调用-setInterval

每隔指定的时间就执行一次代码

• 调用 setInterval() 方法同样也会返回一个间歇调用 ID，该 ID 可用于在将来某个时刻取消间歇调用。
• 要取消尚未执行的间歇调用，可以使用 clearInterval()方法并传入相应的间歇调用 ID

var num = 0;
var max = 10;
var intervalId = null;

function incrementNumber() {
  num++;
  // 如果执行次数达到了max设定的值，则取消后续尚未执行的调用
  if (num == max) {
    clearInterval(intervalId);
    console.log("Done");
  }
}

intervalId = setInterval(incrementNumber, 500);

上面的例子也可以用 setTimeout() 实现

var num = 0;
var max = 10;

function incrementNumber() {
  num++;

  // 如果执行次数未达到max设定的值，则设置另一次超时调用
  if (num < max) {
    setTimeout(incrementNumber, 500);
  } else {
    console.log("Done");
  }
}

setTimeout(incrementNumber, 500);

关卡

setTimeout(function () {
  console.log("1");
}, 0)
console.log("2");   // "2","1"

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);     // 5,5,5,5,5
  }, 0)
};

// 想要输出 0 ~ 4
// 1：将var 改成 let
for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 0)
};
// 2：使用闭包1
for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function () {
      console.log(i);
    }, 0)
  })(i)
};
// 3：使用闭包2
for (var i = 0;i<5;i++) {
  setTimeout((function (i) {
    return function () {
      console.log(i);
    }
  })(i), 0)
};

var a = 1;
var obj = {
  a : 2,
  b : function(){
    setTimeout(function () {
        console.log(this.a);
    }, 0)
  }
}
obj.b();    // 1
// setTimeout() 是window对象的方法，内部的 this 指向 window

var a = 1;
var obj = {
  a : 2,
  b : function(){
    setTimeout(() => {
        console.log(this.a);
    }, 0)
  }
}
obj.b();    // 2
// 这里使用了箭头函数，this 是调用它的方法的this，指向 obj

var a = 1;
var obj = {
  a : 2,
  b : function(){
    setTimeout(function () {
      console.log(this.a);
    }.call(this), 0);
  }
}
obj.b();    // 2
// 显式的call(this)，将调用它的方法的this 赋值给了setTimeout，指向 obj