关闭

setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

时间: 2018-11-25阅读: 1587标签: 定时器

setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就是用setInterval()做的定时滚动会随着浏览器页面切换变得无法控制!为什么会说无法控制呢,因为在切换页面一段时间之后,我本设置3秒滚动一次变成了一秒一次,滚动变得越来越快了。对于这个问题我花了一个上午得时间去解决。下面我们先了解一下setInterval()和setTimeout()方法的区别


setInterval()和setTimeout()方法的区别

setInterval()可按照指定的周期(以毫秒计)来调用函数或计算表达式,直到直到clearInterval()方法 被调用或窗口被关闭。。简单的说就是每几秒执行一次,无限执行。

而它的用法也非常简单。

setInterval(function(){ alert("Hello"); }, 3000);

这句代码的意思是每3秒弹出一个“Hello”对话框。(每3秒弹出一次,无限弹出)

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。简单得说就是几秒之后,你把我交给你得任务执行了。(执行一次)

setTimeout(function(){ alert("Hello"); }, 3000);

这句代码的意思是3秒之后弹出一个“Hello”对话框。(只弹出一次)

了解完setInterval()和setTimeout()的区别后,如果你想做一个一直滚动的公告栏,肯定会选择setInterval()方法吧,当然我也是这样选的,刚开始感觉还不错,直到我发现了前面所说的那个setInterval越来越快的问题.......


setInterval()的弊端越来越快的问题

经过仔细排查之后,我排除了我自己代码的问题,于是就开始查各种资料。最后才晓得这是setInterval()自身的问题。下面引用大佬的一段话来解释为什么使用setInterval会出现越来越快的问题。

JavaScript是运行在单线程的环境中的,所以这就意味着定时器就成了要执行的计划!而不是必须要执行的铁律! 为啥呢? 当函数开始执行时在栈中创建出来一个栈帧,这个栈帧的执行是需要时间的,假设有3秒,在这三秒内,JavaScript的单线程特点就会确保在这3秒内全力的专一的去解决掉这个栈帧(函数)。所以在这个函数运行的时候定时器是没有能力终止他的运行的,因此当函数的运行时间大于间隔时间时,间隔时间1秒到了,但是程序还有2秒没有执行完,那你也给我老老实实的等着函数执行完!!!”

知道了问题的原因,那我们再来看一下怎么去解决这个问题。


使用setTimeout循环来解决setInterval越来越快的问题

代码很简单,直接上代码

var i=0;
    function show() {
        console.log(i);
        i++;
        if(i<5){
            setTimeout(show,1000);
        }
    }
    show();

上面也就是做了一个setTimeout循环,让setTimeout也可以达到setInterval()无限循环的效果,但是不会出现setInterval()越来越快的问题。

来源:https://www.cnblogs.com/gold404/archive/2018/11/24/10011675.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1418

关闭

JavaScript 开发者应该知道的 setTimeout 秘密

计时器setTimeout是我们经常会用到的,它用于在指定的毫秒数后调用函数或计算表达式。语法:setTimeout(code, millisec, args);注意:如果code为字符串,相当于执行eval()方法来执行code。

浅谈JS之setTimeout与setInterval

setTimeout与clearTimeout,以及setInterval与clearInterval均属于Window对象方法。实例简单描述:该实例是通过Vue实现的,具体操作要求是单击【开始游戏】按钮3秒钟后执行走马灯效果,单击【结束游戏】按钮停止走马灯效果,具体代码如下:

js中如果遇到低版本安卓设备调用setTimeout不生效解决办法

工作中会遇到低版本安卓设备调用setTimeout不生效,既不会报错,里面的函数也不会执行,这里po一个解决办法,如果不执行则执行安卓自己封装的原生的setTimeout方法:sdk.setTimeout。

Js中setTimeout()、setInterval()、链式setTimeout()

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行

18 行 JS 代码编一个倒时器

有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备。不管你是否有一次约会,销售、促销、或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的插件。虽然有许多很棒的时钟插件

js 随机点名

主要是利用定时器,点击开始IDE时候不断的执行,并同时生成随机数,利用数组的下标完成展示。主要用到的知识点:setInterval,Math.random()

js定时器setTiemout、setInterval

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下。

JS 定时器的4种写法及介绍

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段

为什么尽量别用setInterval

在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。

JavaScript定时器的更多知识点

导语:JavaScript定时器是window的一个对象接口,并不是JavaScript的一部分,它的功能是由浏览器实现的,在不同浏览器之间会有所不同。定时器也可以由node.js运行时本身实现。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!