[乐意黎]JS中的setTimeout与setInterval

setTimeout 只在指定时间后执行一次

setInterval 以指定时间为周期循环执行

两种方法根据不同的场景和业务需求择而取之,

一般情况下setTimeout用于延迟执行某方法或功能,
setInterval则一般用于刷新表单,对于一些表单的假实时指定时间刷新同步


setTimeout


例一:

setTimeout(function(){
  debugger;//1
  console.log("aerchi");
  debugger;//2
  setTimeout(function(){
    debugger;//4
    arguments.callee;
  },1000);
debugger;//3
},1000)
10:07:59.211 15
10:08:02.939 VM4910:3 aerchi

例二:
setTimeout(function(){
  console.log("aerchi");  
},10*1000)
10:08:19.642 17
10:08:29.634 VM4913:2 aerchi

******


这两个定时器的基本含义,只要是学前端的肯定没有不知道的。为什么说定时器颠覆了我们以往的认知呢?

因为定时器的回调函数并不是相当于在时间到了就执行
而是有一个主js执行进程,这个进程是页面刚加载的时候页面按照加载顺序执行的js代码,
此外还有一个需要在进程空闲的时候执行的代码队列,而我们所说的定时器的回调就是相当于(以上的例一为例)在1000ms之后把定时器回调放入到空闲队列中(注意,空闲队列有可能还有其它的代码,比如点击事件,因此定时器回调放入的位置不一定是空闲队列的开始位置!)

举个例子:

var i=0;

function a(){

t=setTimeout(function(){console.log("aerchi")},0);

}

a();

alert("乐意");


 此时你会发现先弹出乐意,又弹出的aerchi!!

好了,可以简单理解为定时器和js其他程序是并行执行的,jquery的作者也有一篇文章专门介绍这个队列的,有兴趣的可以搜一下看看!!

接下来说第二点,就是例一与例二的区别:

setInterval有个很烦的地方就是当js主程序空闲时候,执行代码队列里面的代码的时候

如果此时候有一个问题,
定时器是等到回调执行完,才开始计时进行下次循环呢?
还是只要一次计时完毕,插入回调之后不管回调执不执行就开始计时呢?
答案显然是后者,
这也就是我说setInterval坑比的原因啊,
因为这会出现一种情况,当我们插入回调的时候前队列有别的代码在执行,这时候回调肯定是不会执行的,因此如果这个时候无限定时时间到了会再次插入回调,这个时候如果发现队列中的第一次回调没有执行,那么再次插入的回调浏览器就默认取消,(这是以防出现回调连续执行多次的情况)但是这又引发了新的情况就是有些回调是不能取消掉的?

这就是经常使用例一代替例二的原因。


setInterval 

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])
参数描述
code必需。要调用的函数或要执行的代码串。
millisec必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

实例

<html>
<body>

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button οnclick="int=window.clearInterval(int)">
Stop interval</button>

</body>
</html>


<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
<button οnclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</html>

注: 停止时,可用清空console 及console历史,刷新当前页面.

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览