JavaScript 中 setTimeout 的正确应用与常见误区

setTimeout 基本原理与执行机制

本文整理关于 setTimeout 在 JavaScript 中的应用笔记。

var ids = [];
function foo1(i) {
  this.i = i;
  console.log('i = '+i);
  ids[0] = setTimeout((function () {
    foo1(i);
  }),1000);
}
function foo2(j) {
  this.j = j;
  console.log('j = '+j);
  ids[1] = setTimeout((function () {
    foo2(j);
  }),1000);
}
foo1(2);
foo2(3);
clearTimeout(ids[0]);
clearTimeout(ids[1]);

当调用 setTimeout(f, n) 时，系统会返回一个唯一的 ID 标识，并计划在大约 n 毫秒后执行函数 f。需要注意的是，f 函数默认仅执行一次；若需周期性执行，必须在回调内部再次调用 setTimeout。由于 JavaScript 引擎采用单线程运行模式，且受计时策略影响，其他代码的执行可能会阻塞当前线程，因此无法保证回调函数会在指定的确切时刻被调用。为了避免阻塞问题，建议在回调函数内部使用 setTimeout 进行递归调用。

JavaScript 具有异步特性，setTimeout 仅执行一次回调，而 setInterval 会每隔 X 毫秒重复执行。然而，官方并不推荐频繁使用 setInterval。当回调函数的执行时间超过设定的间隔时间或被阻塞时，setInterval 仍会继续派发新的回调指令，导致在极短的时间间隔下，大量回调函数堆积，引发性能问题。

setTimeout 和 setInterval 均接受第一个参数为字符串的情况。这一特性存在严重安全隐患，因为内部实际上调用了隐藏的 eval 机制。由于此时 eval 并非直接调用，传递的字符串会在全局作用域中执行，极易引发作用域污染和安全漏洞。因此，强烈建议不要通过字符串形式调用定时器函数来传递参数；若需传递参数，应创建匿名函数并在其中执行真实的回调逻辑。

基于 setTimeout 的函数节流实现

onscroll、onresize 等事件处理函数非常消耗性能。如果直接在这些事件中发起 AJAX 请求，窗口缩放一次可能会连续触发多次请求。为了解决这一问题，我们可以尝试使用函数节流技术，结合 setTimeout 定时器来实现控制。

以下是第一种封装方法的实现思路。

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
window.onresize = function () {
  delayFun(oCount)
};

function delayFun(method, thisArg) {
  clearTimeout(method.props);
  method.props = setTimeout(function () {
    method.call(thisArg)
  }, 200)
}

以下是第二种封装方法的实现思路。

通过构造闭包，利用闭包特性形成私有作用域来存放定时器 timer。timer 变量通过参数传递的形式引入，从而确保每个实例拥有独立的定时器状态。

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
var funs= delayFun(oCount,100);
window.onresize = function () {
  funs()
};

function delayFun(func, wait) {
  var timer = null;
  return function () {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      func.apply(context, args);
    }, wait)
  };
}

对第二种方法进行优化，可以进一步提升性能表现。

该封装返回一个函数。如果该函数被不间断地高频调用，它将不会立即执行；只有当停止调用超过 N 毫秒后，再次调用才会触发执行。如果传递了 'immediate' 参数，函数会立即将任务安排到执行队列中，而不会延迟执行。

function delayFun (func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// 用法
var myEfficientFn = delayFun (function() {
  // 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);

此机制确保回调函数在指定时间内最多执行一次。当为频繁触发的事件分配回调函数时，该机制显得尤为重要，能有效避免重复计算和无效请求。

业务逻辑中滥用 setTimeout 的风险与建议

既然 setTimeout 功能如此强大，我们是否可以在项目中大量使用它？

个人建议是不推荐的。在大多数业务场景中，应禁止在核心业务逻辑中使用 setTimeout。因为观察到的许多使用场景，往往是因为某些问题难以通过正常流程解决，而将 setTimeout 作为一种 Hack 手段来规避。

例如，当一个实例尚未初始化时，如果直接使用该实例，错误的解决办法是在使用时包裹一个 setTimeout，试图确保实例先完成初始化。

这种做法为何是错误的？其本质上是使用了非标准的 Hack 手段。

首先，这埋下了隐患，会打乱模块的正常生命周期。

其次，当出现问题时，由于 setTimeout 引入了异步延迟，使得调试变得非常困难。

我认为正确的使用方式是参考软件生命周期管理（可参考《关于软件的生命周期》），将实例化操作前置到使用前执行，确保依赖就绪后再进行业务逻辑处理。

以上就是为大家整理的 JavaScript 学习笔记中关于 setTimeout 应用的全部内容，希望对大家有所帮助，多多支持本站~