JavaScript定时器

• ， 27 3月 2021
• 作者 847954981@qq.com
• 前端学习

JavaScript定时器

在使用JavaScript的过程中，我们可能要去使用定时器，而JavaScript就拥有其自带的定时功能

延时执行 setTimeout()

消除计时器 clearTimeout(timerId);

具体使用：

console.log(1);

/**
 * 第一个参数是代码，注意代码需用引号包裹，否则会立即执行代码
 * 第二个参数是 1000，即 1000ms 后执行 console.log(2)
 */
setTimeout('console.log(2)', 1000);

/**
 * 第一个参数是匿名函数
 * 第二个参数是 2000，即 2s 后执行 console.log(3)
 */
setTimeout(function () {
  console.log(3);
}, 2000);

// 第一个参数是函数名，注意函数名后不要加小括号“()”，否则会立即执行 print4
setTimeout(print4, 3000);

console.log(5);

function print4() {
  console.log(4);
}

其结果为

// 立即执行
console.log(1);
// 立即执行
console.log(5);
// 1s 后执行
console.log(2);
// 2s 后执行
console.log(3);
// 3s 后执行
print4(); // 即：console.log(4)

利用此方法，我们可以拥有计时功能如：

// 首先定义计时总秒数，单位 s
let i = 60;

// 定义变量用来储存定时器的编号
let timerId;

// 写一个函数，这个函数即每次要执行的代码，能够完成上述的 1、2、3
function count() {
  console.log(i);
  i--;
  if (i > 0) {
    timerId = setTimeout(count, 1000);
  } else {
    // 清除计时器
    clearTimeout(timerId);
  }
}

// 首次调用该函数，开始第一次计时
count();

除了延时执行 setTimeout()以外，JavaScript还存在

无限调用 setInterval()

与setTimeout()相比，无限调用的意思为每隔一段时间调用一次函数，（延时执行则是隔一段时间再执行）

同样需要 消除计时器 clearTimeout(timerId);