Javascript不仅可以允许我们马上执行一个function,我们也可以实现在一个指定的时间以后来调用function。后者称之为“scheduling call”。

有两个主要的方法可以实现：

1. setTimeout:过一段时间以后调用某个function
2. setInterval:重复不断的执行某个function，一段时间以后开始调用，然后按照一定的间隔重复不断的调用。

setTimeout

setTimeout的语法如下：

let timerId = setTimeout(func | code, [delay], [arg1], [arg2], ...)

它有以下的参数：

• func|code: 一个字符串或一个待调用的function代码。按规则讲，它应该是一个function, 代码string也可以传进来，但不建议。
• delay:function执行之前的delay等待时间，默认为0毫秒。
• arg1,arg2,...:是要调用的function的参数（IE9不支持）。

举例，以下的代码在1秒后调用welcom()的function.

function welcome() {
  console.log('欢迎访问www.ilaoxu老许编程');
}
setTimeout(welcome, 1000);

带参数的例子：

function welcome(message, siteName) {
  console.log(message   ' to '   siteName);
}
setTimeout(welcome, 1000, "欢迎您访问", "www.ilaoxu老许学编程"); 

在第一个参数为字符串的情形下，这样使用（双引号和单引号的组合使用）：

setTimeout("console.log('欢迎访问www.ilaoxu老许编程')", 1000);

但是，推荐用法是使用arrow function。

setTimeout(() => console.log('欢迎访问www.ilaoxu老许编程'), 1000);

推荐用法是传递一个function进去，但不要去执行它。在function后面添加一个括号不是好主意。

//错误用法
setTimeout(welcome(), 1000);

用clearTimeout取消

setTimeout返回一个“计时器的标记” tiemId，用来取消cancel这个调用。下面的例子为语法示例：

let timeoutId = setTimeout(...);
clearTimeout(timeoutId);

下面的例子演示了设置一个定时调用，然后取消它：

let timeoutId = setTimeout(() => console.log("Hello, dear user!"), 2000);
console.log(timeoutId); // 计时器标记
clearTimeout(timeoutId);
console.log(timeoutId); // 同样的计时器标记 (取消以后不会变为null)

setInterval

setinterval语法示例：

let timerId = setInterval(func | code, [delay], [arg1], [arg2], ...)

参数的意思跟setTimeout一致，不同的是调用以后会持续重复的调用。

使用clearInterval(timerId)来停止将要发生的调用。

看一个例子

// 2秒钟重复一次
let intervalTimerId = setInterval(() => console.log('开始'), 2000); 
// 5秒后结束重复
setTimeout(() => {
  clearInterval(intervalTimerId);
  console.log('停止');
}, 5000);

嵌套的setTimeout

重复执行某个动作，我们可以有两种方法，一种是使用setInterval，另一种是使用setTimeout,举例如下：

/** 与其使用:
let intervalTimerId = setInterval(() => console.log('开始'), 1000);
*/ 
let intervalTimerId = setTimeout(function start() {
  console.log('开始');
  intervalTimerId = setTimeout(start, 1000); // (*)
}, 1000);

在当前的setTimeout中使用另一个setTimeout预定了下一次的调用。

嵌套的setTimeout更灵活一些。比如，你要写一个程序Meizu5秒钟向后台服务器调用数据，如果服务器繁忙，间隔时间就翻倍。

let delay = 3000;
let intervalTimerId = setTimeout(function request() {
  //发送请求
  if (如果服务器出错，请求失败) {
    delay *= 2;
  }
  intervalTimerId = setTimeout(request, delay);
}, delay);

可以理解为setTimeout在两次调用之间比setInterval更精确。

我们看一个对比的代码：第一个使用setInterval

let i = 1;
setInterval(function () {
  f(i  );
}, 100);

第二个使用setTimeout

let i = 1;
setTimeout(function run() {
  f(i  );
  setTimeout(run, 100);
}, 100)

对于setInterval，它每隔100毫秒调用一次f(i ). 在两次f调用之间的间隔会比代码中的时间要短。

第二个例子中setTimeout，嵌套的setTimeout确保了每两次调用之间的时间间隔，因为它是在上一次调用之后预定新的调用的。

Zero延时 setTimeout

有一个特殊的调用例子就是在当前代码之后立即调用setTimeout，没有时间间隔。

setTimeout(() => console.log("www.ilaoxu"));
console.log("欢迎访问老许编程");

浏览器端对多久运行一次嵌套setTimeout有限制，HTML5标准规定，在4次嵌套timer后，时间间隔至少要4ms。

服务器端的javascript没有限制。经常会有立即调用异步任务的情况。

订阅最新文章 老许学编程一个有大纲的学习平台