JS--利用setTimeout模拟setInterval

setTimeout(fn, time),超时调用,在时间大于等于 time 时调用;

setInterval(fn, time),是间歇调用,每隔 time 调用一次。从载入后,每隔指定的时间就执行一次表达式,只要窗口不关闭或 clearInterval() 调用就会无限循环下去

虽然两者不一样,但是却可以相互模拟。具体使用那个,以具体的需求和场景具体分析,就像for循环可以模拟所有的循环一样(包括分支,以及do while一样)。一般情况下 setTimeout() 用于延迟执行某方法或功能;setInterval() 则一般用于刷新表单,对于一些表单的假实时指定时间刷新同步

这种重复定时器的规则有两个问题:

  1. 某些间隔会被跳过

  2. 多个定时器的代码执行时间可能会比预期小。

为了避免setInterval()的重复定时器的这两个缺点,可以使用模拟setInterval

/**
 * 
 * @param {*} dom1  启动定时器的元素
 * @param {*} dom2  关闭定时器的元素
 * @param {*} fn  需要执行的定时器函数
 * @param {*} interval 定时器的时间间隔
 */
function setTimeout_setInterval(dom1, dom2, fn, interval) {
    var timer = time;
    var flag = true;

    function time() {
        fn()
        setTimeout(time, interval);
    };
    dom1.onclick = function() {
        if (typeof time === "function") {
            time();
        } else {
            time = timer;
            time();
        }
    }
    dom2.onclick = function() {
        time = null;
    }
}

模拟 setTimeout() :用 setInterval() 模拟 setTimeout() 很简单,在 setInterval() 执行一次后,立刻关闭窗口(当然这是耍无赖)或者执行 clearInterval() 方法(这个靠谱点)。clearInterval() 需要在 setInterval()执行code方法内或其他地方执行,不能紧接着 setInterval() 后面执行,那样setInterval() 还没等到执行,就已经被干掉了

var intervalNum = 0, clearId = 0;
function testsetInterval(){
    var date = new Date();
    console.log(date.getSeconds());
    console.log("setInterval", intervalNum++);
    clearInterval(clearId);     //也可以在此执行
}
function testFuntion() {
    clearId = setInterval(function () {
        testsetInterval();          //每隔4秒调用testsetInterval()
        // clearInterval(clearId);     //可以在此执行
    },4000);
}

上面代码实现了递归调用,这样做的好处是:在前一个定时器代码执行完成之前,不会向队列插入新的定时代码,确保不会有任何的缺失间隔。而且,它保证在下一次定时器代码执行之前,至少要等待指定的时间间隔。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值