用setTimeout实现setInterval

// 用setTimeout实现setInterval

// 1. 变量初始化
const timerMap = {}  // 可在全局内存储多个timerId, 对象的键是数字时会自动转为字符串
let id = 0  // timerId的全局的辅助变量

// 2. 定义mySetInterval
const mySetInterval = (cb, time) => {
    // 2.1 变量定义及初始化
    const timerId = id // 调用mySetInterval一次,timerId就会产生一个新值
    id++

    // 2.2 定义递归函数
    const fn = () => {
        // 执行定时器时间函数
        cb()
        // 递归调用递归函数
        timerMap[timerId] = setTimeout(fn, time)
    }
    // 2.3 执行setTimeout
    // 递归调用时,timerMap[timerId]每隔time时间不断更新,只保留最近一次调用setTimeout返回的值
    timerMap[timerId] = setTimeout(fn, time)  
    // 2.4 返回结果
    return timerMap[timerId]

}

// 测试
mySetInterval(() => {
    console.log(1)
}, 1000)
console.log(timerMap)
// console.log(timerMap)输出结果
// {
//     '0': Timeout {
//       _idleTimeout: 1000,
//       _idlePrev: [TimersList],
//       _idleNext: [TimersList],
//       _idleStart: 39,
//       _onTimeout: [Function: fn],
//       _timerArgs: undefined,
//       _repeat: null,
//       _destroyed: false,
//       [Symbol(refed)]: true,
//       [Symbol(kHasPrimitive)]: false,
//       [Symbol(asyncId)]: 2,
//       [Symbol(triggerId)]: 1
//     }
//   }
mySetInterval(() => {
    console.log(2)
}, 2000)
console.log(timerMap)

// 3、实现myClearInterval
const myClearInterval = (timerId) => {
    // 3.1 清理定时器
    clearTimeout(timerMap[timerId])
    // 3.2 删除timerMap中对应的定时器记录
    delete timerMap[timerId]
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以在 setTimeout 函数内部递归调用它自己,以实现 setInterval 的效果。代码示例如下: ``` function setIntervalCustom(callback, interval) { setTimeout(function () { callback(); setIntervalCustom(callback, interval); }, interval); } ``` ### 回答2: setIntervalsetTimeout都是JavaScript的定时器,都可以用于周期性地调用一个函数来执行某些操作。它们的差别在于setInterval是每隔一段时间就调用一次函数,而setTimeout是在一定时间之后才调用一次函数。但是,我们可以使用setTimeout来模拟setInterval的效果。 步骤如下: 1. 定义一个全局变量intervalId,用来存储定时器的id,初始化为null。 2. 定义一个函数,例如fn,用来执行我们想要周期性执行的操作。 3. 在fn函数的末尾,调用setTimeout函数来设置下一次fn函数的执行时间。可以设置一个常量来表示每隔多长时间执行一次,例如interval = 1000。 4. 在setTimeout函数的第一个参数中,调用fn函数自身,并且使用bind方法把本次调用的this指向fn函数的上下文,这样可以保留fn函数自身的作用域和状态。 5. 将setTimeout函数的返回值赋值给intervalId变量,这样我们就可以在后面的操作中取消定时器。 6. 最后,在需要取消定时器的时候,调用clearTimeout方法,把intervalId作为参数传进去即可。 一个完整的示例代码如下: ``` let intervalId; function fn() { console.log('Hello world'); intervalId = setTimeout(fn.bind(this), 1000); } intervalId = setTimeout(fn.bind(this), 1000); // 取消定时器 clearTimeout(intervalId); ``` 这段代码中,我们定义了一个函数fn,用来向控制台输出一段消息。在fn函数的末尾,我们使用setTimeout函数设置下一次fn函数的执行时间,并且将fn函数自身作为第一个参数,使用bind方法把本次调用的this指向fn函数的上下文。在外部,我们在setTimeout函数中调用fn函数,设置执行时间为1000毫秒,把返回值赋值给intervalId变量。这样,fn函数就会每隔一秒钟执行一次了。最后,我们使用clearTimeout函数取消定时器,向intervalId传入上一次定时器的id即可。 ### 回答3: 在JavaScript中,setIntervalsetTimeout都是常使的定时器函数,它们都能用来定期执行某个函数,但是有细微的差别。setInterval方法会每隔指定时间就执行一次特定的代码,而setTimeout方法仅执行一次,在延迟指定时间后执行特定的代码。然而,我们也可以使用setTimeout方法来实现setInterval的效果。 使用setTimeout函数实现setInterval的原理是,将setTimeout函数封装在一个循环中,每次setTimeout函数调用结束后,再次调用setTimeout函数来不断运行这个封装的函数,从而实现类似setInterval的效果。因此,实现setTimeout函数来模拟setInterval的代码如下: ```javascript function setMyInterval(func, delay) { var id = setTimeout(function run() { func(); id = setTimeout(run, delay); }, delay); return id; } ``` 在setMyInterval函数中,我们调用了setTimeout函数,并在setTimeout函数的回调函数中,首先调用了func()函数来执行特定的代码,然后在函数末尾调用了setTimeout(run, delay)函数,这个函数再次调用了setTimeout函数来不断进行循环调用,从而实现了类似setInterval的效果。 接下来,我们可以使用这个函数来实现类似setInterval的效果: ```javascript function print() { console.log("Hello, world!"); } setMyInterval(print, 2000); ``` 在上面的例子中,我们定义了一个print函数,其功能是每2秒输出一次"Hello, world!"。然后,我们调用了setMyInterval函数,并将print函数和2000毫秒作为参数传递给该函数。这样,就相当于每隔1秒就会输出一次"Hello, world!"。 总结:通过使用setTimeout函数来封装一个循环调用,我们可以很容易地用JavaScript实现setInterval的效果。这样的使用还可以提高定时器函数的性能,避免多个定时器函数相互干扰,从而达到更好的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ICPunk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值