JavaScript中的setTimeout

简介

setTimeout()是一个JavaScript函数，用于在一定时间后执行一段代码。它接受两个参数：要执行的代码和时间（以毫秒为单位）。

用法

基本用法

基本用法如下所示：

setTimeout(function() {
  // 要执行的代码
}, 时间);

其中时间单位为毫秒，执行后会等待指定的时间后继续执行代码。

取消setTimeout

我们可以使用clearTimeout()函数来取消setTimeout()的执行。该函数接受一个参数，即要取消的setTimeout()的ID，其语法为：

clearTimeout(ID);

ID表示要取消的setTimeout()的ID。

查看还剩多少时间

我们可以使用clearTimeout()来查看还剩多少时间。具体做法是先用Date.now()获取当前时间戳，然后减去setTimeout()的开始时间戳和时间差，就可以得到剩余的时间。

示例代码如下所示：

// 要执行的代码
function do_something() {
  console.log("Hello World");
}

// 执行代码前记录时间戳
let start_time = Date.now();

// 执行setTimeout()，传入要执行的代码和时间
let timeout_id = setTimeout(do_something, 5000);

// 使用clearTimeout()取消setTimeout()并计算剩余时间
function check_timeout(timeout_id) {
  clearTimeout(timeout_id);
  let elapsed_time = Date.now() - start_time;
  console.log(`Timeout was cancelled with ${5000 - elapsed_time} ms left.`);
}

// 3秒钟后取消setTimeout()
setTimeout(() => check_timeout(timeout_id), 3000);

限制最小间隔时间

如果我们需要通过setTimeout()来实现一个可以重复执行的函数，我们需要注意限制最小间隔时间。在某些场景下，连续执行函数的时间间隔过短，会导致函数产生不正常的行为。

为了限制最小间隔时间，我们可以使用requestAnimationFrame()函数。该函数在每个动画帧开始时执行，可以让我们通过循环递归来控制函数的执行时间。

示例代码如下所示：

// 要执行的代码
function do_something() {
  console.log("Hello World");
  // 递归调用函数
  requestAnimationFrame(do_something);
}

// 定义函数开始时间
let start_time = null;

// 控制函数执行时间
function throttle(callback, limit) {
  // 如果开始时间未定义，则用当前时间进行初始化
  start_time = start_time || Date.now();

  // 判断时间差是否大于limit
  if (Date.now() - start_time >= limit) {
    callback();
    start_time = null;
  } 
}

// 调用throttle()控制函数执行时间
requestAnimationFrame(() => throttle(do_something, 1000));

结论

setTimeout()是JavaScript中非常有用的函数之一，可以实现对代码的延迟执行和定时重复执行等功能。同时，掌握clearTimeout()函数和限制最小间隔时间的技巧，可以让我们更好地利用setTimeout()函数。