wangbinze / Daily---3and1

0 stars 0 forks source link

❤️❤️❤️Question022 -JavaScript、为什么要用 setTimeout 模拟 setInterval ? #22

Open wangbinze opened 3 years ago

wangbinze commented 3 years ago

题目:为什么要用 setTimeout 模拟 setInterval ?

wangbinze commented 3 years ago

setInterval推入任务队列的事件不准确

setInterval(fn(), N);  // fn()将在N秒之后被推入任务队列。

在 setInterval 被推入任务队列时,如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等,那么这个定时器的执行时间和我们预定它执行的时间可能并不一致。

函数操作耗时过长导致的不准确

考虑极端情况,假如定时器里面的代码需要进行大量的计算(耗费事件较长),或者是DOM操作。这样一来,花的时间就比较长,有可能前一次代码还没有执行完,后一次代码就被添加到队列了。也会导致定时器变得不准确,甚至出现同一时间执行两次的情况。

setInterval 缺点 与 setTimeout 的不同

setTimeout和setInteval是window对象上两个主要的定时方法,他们的语法基本相同,但完成功能的却是不同的。

每个 setTimeout 产生的任务会直接 push 到任务队列中;而 setInterval 在每次把任务 push 到任务队列前,都要进行一下判断(看上次的任务是否仍在队列中,如果有则不添加,没有则添加)。 因而我们一般用 setTimeout 模拟 setInterval ,来规避掉上面的缺点。

   const mySetInterval = (callbcak, time) => {
        (function inner() {
            const timer = setTimeout(() => {
                callbcak()
                clearInterval(timer)
                inner()
            }, time)
        })()
    }
     mySetInterval(() => {
        console.log(2)
    }, 3000)