用setTimeout实现setInterval

2020年4月2日

首先,要用setTimeout实现setInterval先了解这俩个方法的区别.

  • setTimeout(fn, delay, ...arg)方法设置一个计时器,一旦计时器到期,该计时器将执行功能或指定的代码段。
    • fn: 要重复调用的函数。
    • code: 这个语法是可选的,你可以传递一个字符串来代替一个函数对象(不推荐)。
    • delay: 是每次延迟的毫秒数 (一秒等于1000毫秒),函数的每次调用会在该延迟之后发生。实际的延迟时间可能会稍长一点。
    • ...arg: 传递给function指定的函数的其他参数。
  • setInterval(fn, delay, ...arg)方法与setTimeout方法唯一的不同就是前者只会执行一次函数,而后者是重复调用一个函数.

示例:

// setTimeout方法
var timeoutID = window.setTimeout(myCallback, 500, 'timeoutID 1', 'timeoutID 2');
// setInterval方法
var intervalID = window.setInterval(myCallback, 500, 'intervalID 1', 'intervalID 2');

function myCallback(a, b)
{
 console.log(a);
 console.log(b);
}

实现

// 参数 cb 为重复执行函数,wait 为间隔时间,frequency为触发次数.
 var mySetInterval = function (cb, wait, frequency) {
            let i = 0
            const fn = function () {
                setTimeout(function () {
                    cb()
                    i++
                    console.log(i)
                    if (i < frequency) {
                        fn()
                    }
                }, wait)
            }
            fn()
        }
        mySetInterval(function () {
            console.log(new Date())
        }, 1000, 10)