码上掘金实现setTimeInterval

2022-09-20 98 阅读1分钟

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

介绍

setTimeInterval的需求在前端是十分常见的，我们在许多的开发和工作中都可以看到实际的例子，接下来，我将设计一个setTimeInterval的例子，如果大家有任何疑问和难题都可以评论区留言，我会第一时间解决和处理的。谢谢各位观众老爷的支持。

码上掘金地址

核心功能讲解

function mySetInterval(delay,fn) {
  let timer = null
  const main = () =>{
    timer = setTimeout(() => {
      fn()
      main()
    }, delay);
  }
  main()
  return ()=>{
    clearTimeout(timer)
  }
}
console.log("dzp")
let stop = mySetInterval(1000,()=>{console.log("load")})

setTimeout(() => {
  stop()
}, 5000);

首先我们清楚使用setTimerout模拟setTimeInterval的核心一定是根据闭包完成的，否则定时器是无法在外界关闭的。
函数的第一个参数是定时器的轮询时间，第二个参数是定时器的回调函数
首先我们函数的内部定义一个函数，递归的完成需要的执行的函数，使用setTimeout完成一轮的执行
在函数的外界调用，函数是递归的调用。
最后通过返回函数，返回函数的内部是一个关闭定时器的作用
外界调用时，随机可以关闭定时器。

总结

通过对setTimeInterval实际说明和举例子，大家对其内部的设计和原理肯定有了一定的认识，大家可以根据我的分步骤讲解具体的设计一个setTimeInterval例子，谢谢各位的观看，有疑问评论区见。