用最简单的方式搞懂delay函数的原理，分分钟掌握它的实现方法

2023-10-06 15:07:54

揭秘JavaScript延迟执行的奥秘：从setTimeout到功能完善的delay函数

简介

在软件开发中，延迟执行是常见的需求，例如防抖和节流。本文将深入剖析延迟执行的原理，一步一步实现一个功能完善的delay函数，涵盖提前触发、取消延迟等需求。

setTimeout的原理

JavaScript的setTimeout函数通过两个参数工作：回调函数和延迟时间。当延迟时间到期后，回调函数就会被执行。举个例子：

setTimeout(() => {
  console.log('Hello, world!');
}, 1000);

这段代码会在1秒后输出"Hello, world!"。

delay函数的实现

delay函数也采用setTimeout来实现延迟执行，但它增加了以下特性：

提前触发
取消延迟

delay函数的实现如下：

function delay(fn, ms) {
  let timer;

  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, ms);
  };
}

使用方法

delay函数返回一个函数，该函数有两个用途：

清除之前的延迟
重新设置延迟

通过调用delay函数返回的函数，我们可以实现延迟执行。

提前触发

我们可以通过调用delay函数返回的函数来提前触发回调函数。

const fn = delay(() => {
  console.log('Hello, world!');
}, 1000);

fn(); // 提前触发回调函数

这段代码会在函数fn被调用后立即输出"Hello, world!"。

取消延迟

我们可以通过调用delay函数返回的函数来取消延迟。

const fn = delay(() => {
  console.log('Hello, world!');
}, 1000);

fn.cancel(); // 取消延迟

这段代码不会输出任何内容。

高级应用

delay函数提供了强大的特性，可用于实现各种延迟执行场景。例如：

防抖

防抖是指在指定时间内只执行最后一次操作。

const debounce = (fn, ms) => {
  let timer;

  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, ms);
  };
};

节流

节流是指在指定时间内只执行一次操作。

const throttle = (fn, ms) => {
  let canRun = true;

  return () => {
    if (!canRun) return;

    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, ms);
  };
};