delay 延迟函数源码阅读笔记

一条会coding的Shark
1,208 阅读2分钟

我正在参与掘金会员专属活动-源码共读第一期，点击参与

前言

延迟函数，可能有的人听过，有的人没听过。在没看到这个东西之前，我也是不知道 delay 延迟函数的，因此出于好奇心，便看了看若川大佬的这一篇文章 面试官：请手写一个带取消功能的延迟函数，axios 取消功能的原理是什么

delay

在上面那篇文章里，若川大佬带我们学会如何实现一个比较完善的 delay 函数，使用 AbortController 实现取消功能以及面试中常考的 axios 取消功能实现。看完文章后，确实学到了很多，这次就 delay 函数的学习来记录一些相关笔记。

源码部分

我们先来看看关于它的源码部分。它的源码部分其实不算很多，七十多行。我们取一些比较关键的代码部分进行分析。

函数内部定义了一个 createDelay 函数，传入的参数有很多种，比如 defaultClear，set，willResolve 等等。

image.png

然后我在 createDelay 函数内注意到这样一个函数，如下所示：

image.png

这个函数是一个 Promise 函数，通过参数 willResolve 来决定成功还是失败。在上面提及的文章中有使用过。

不难发现，这里面的每个函数都不是多余的，串联性都非常强。

image.png

手写实现一个 delay 函数

简单地过了一遍 delay 函数的源码，我们现在来实现一下延迟函数吧。有一种比较简单的实现方法，使用 Promise，并结合上面所介绍到的参数 willResolve，大致代码如下所示：

const delay = (ms, {value, willResolve} = {}) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if(willResolve){
                resolve(value);
            }
            else{
                reject(value);
            }
        }, ms);
    });
}

现在我们来结合例子使用一下这个函数吧。我创建了一个 react 项目。

image.png

测试代码如下：

(async() => {
  try{
      const result = await delay(1000, { value: '阅读源码', willResolve: true });
      console.log(result,'//////');
  }
  catch(err){
      console.log('输出错误结果', err);
  }
})();

如果成功则打印出结果 value以及//////，如果失败则输出错误结果。

在这里首先我们将参数 willResolve 写死为 true，打印结果如下：

image.png

然后我们将参数 willResolve 写死为 false，打印结果如下：

image.png

根据结果不同，也印证了前面提及到的通过参数 willResolve 来决定成功还是失败这一说法，因此在延迟函数里加入这个参数也是有必要的。

总结

通过学习它的源码以及若川大佬的文章，也简单地实现并理解了 delay 延迟函数。关于这个函数的实现以及使用方法，经过简单的学习后，我觉得是挺容易上手的。总之，这次的源码学习整体而言挺轻松的。

avatar
文章
阅读
粉丝