window.setInterval和window.setTimeout的区别

  (1)setTimeout(表达式,延时时间) 
  在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 

  (2)setInterval(表达式,交互时间) 

  则不一样,它从载入后,每隔指定的时间就执行一次表达式 

  举个例子,下面是常用的产生滚动效果的JavaScript代码:

 1 <script type="text/javascript">
 2     var message = "Learning JavaScript will give your web page life!";
 3     message += "Are you ready to learn?";
 4     var position = 0;
 5     var space = "...";
 6         
 7     function scroller(){
 8         var nextText = message.substring(position, message.length) + space
 9                            + message.substring(0, position);
10         var td = document.getElementById("tabledata");
11         td.firstChild.nodeValue = nextText;
12         position++;
13         if(position > message.length){
14             position = 0;
15         }
16         //window.setTimeout(scroller, 200);   
17         window.setInterval(scroller,200);
18     }
19 </script>

 如果用window.setTimeout(scroller, 200),会产生滚动速度一样的滚动效果;而如果用window.setInterval(scroller,200),会产生滚动速度越来越快的效果。

原因:setTimeout在载入scroller()函数以后,只执行一次scroller()函数,也就是只往后一点一个字母,然后再载入一个scroller()函数,再往后移动一个字母,如此反复,所以产生速度不变的滚动效果。

    而setInterval在载入scroller()函数后,每隔200ms都要执行一次scroller()函数,每次执行scroller()函数都要往后一点一个字母,然后再载入一个scroller()函数,前面载入的scroller()和新载入的          scroller()函数都要往后移动字母,并且新载入的scroller()函数仍然要载入scroller()函数,如此继续,就会产生速度越来越快的滚动效果。



原文地址:https://www.cnblogs.com/hardworkingbee/p/4372844.html