前端面试手写代码——使用 setTimeout 实现 setInterval

迷途小码农零零发

已于 2024-02-20 11:13:25 修改

阅读量240

点赞数

分类专栏：前端笔试文章标签：前端 javascript

于 2023-09-04 14:55:12 首次发布

本文链接：https://blog.csdn.net/yiguoxiaohai/article/details/132669441

版权

前端笔试专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文介绍了三种JavaScript方法，如何将setTimeout在指定时间后调用setInterval的间隔时间内的重复调用过程，包括递归套娃、直接套娃和具名回调函数配合clearTimeout的方式。

摘要由CSDN通过智能技术生成

setTimeout: 倒计时后一次调用
setInterval: 间隔时间之间重复调用

// 方法一：递归套娃，套娃结束的时候，只是clearInterval是通过返回的属性设置
const setTimeoutToInterval = (fn, timeout) => {
  const timer = { flag: true };
  const interval = () => {
    if (timer.flag) {
      fn();
      setTimeout(interval, timeout);
    }
  };
  setTimeout(interval, timeout);
  return timer;
};
const fn = () => console.log("------interval------");
const curTimer = setTimeoutToInterval(fn, 1000);
setTimeout(() => {
  curTimer["flag"] = false;
}, 6000);

// 方法二：递归——直接套娃，本质和方法一并无二致
const _setTimeoutToInterval = (fn, timeout, times) => {
  if (!times) return;
  setTimeout(() => {
    fn();
    _setTimeoutToInterval(fn, timeout, --times);
  }, timeout);
};

// 方法三：递归——具名回调函数 + clearTimeout
const __setTimeoutToInterval = (fn, timeout, times) => {
  let timer = setTimeout(function aa() {
    fn();
    times--;
    timer = setTimeout(aa, timeout);
    if (times <= 0) {
      clearTimeout(timer);
    }
  }, timeout);
};