setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法
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()越来越快的问题。
上一篇: SqlServer-触发器
推荐阅读
-
setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法
-
setInterval和setTImeout中的this指向问题
-
setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法
-
浅谈JavaScript中setInterval和setTimeout的使用问题_基础知识
-
setInterval()和setTimeout()的用法和区别示例介绍_基础知识
-
setInterval和setTImeout中的this指向问题
-
javascript setTimeout和setInterval 的区别_基础知识
-
setInterval()和setTimeout()的用法和区别示例介绍_基础知识
-
浅谈JavaScript中setInterval和setTimeout的使用问题
-
setTimeout和setInterval的区别是什么