setInterval和setTimeout的区别以及弊端

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

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

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

而它的用法也非常简单。

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

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

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

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

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

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

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

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

本来看到网上说的可以用setTimeout循环代替setInterval方法，这样就不会出现越来越快的问题，但是经过测试发现setTimeout循环依旧会出现越来越快的问题。后来仔细思考了一下，出现越来越快的原因应该在于JavaScript的本身，JavaScript运行在单线程的环境中，就算设置了定时计划，也要等它前面的函数执行完成，所以在特定情况下就会出现定时不准确的时间了。

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

上面是setTimeout循环来代替setInterval方法，尽管这样并没有解决定时越来越快的问题，但是只要不长时间停留在页面去切换其他页面，是不会出现越来越快的问题的。 

至于最好的解决方法，博主正在思考中......