2018-12-13

8.1.6 间歇调用和超时调用

Javascript是单线程语言,但是它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。
⑴ 超时值是在指定的时间过后执行代码。
⑵ 间歇时间值是每隔指定的时间就执行一次代码

超时调用需要使用window对象的setTimeout()方法,它接受两个参数:

◆ 要执行的代码
是一个包含Javascript代码的字符串(就和在eval()函数中使用的字符串一样),也可以是一个函数。例:

//不建议传递字符串!因为传递字符串可能导致性能损失
setTimeout("alert('Hello world!')",1000);

//推荐的调用方式
setTimeout(function(){
    alert("Hello world");
},1000)

◆ 以毫秒表示的时间
是一个表示等待多长时间的毫秒数,但经过改时间后指定的代码不一定会执行。

setTimeout()的第二个参数告诉Javascript再过多长时间把当前任何添加到队列中。如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码执行完了以后再执行。

调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。例:

//设置超时调用
var timeoutId = setTimeout(function(){
      alert("Hello world!");
},1000);

//注意:把它取消
clearTimeout(timeoutId)

只要在指定的时间尚未过去之前调用clearTimeout(),就可以完全取消超时调用。
超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined

间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。

设置间歇调用的 方法是setInterval(),它接收的参数与setTimeout()相同;要执行的代码(字符串或函数)和每次执行之前需要等待的毫秒数,例:

//不建议传递字符串!
setInterval("alert('Hello world')",10000);

//推荐的调用方式
setInterval(function(){
      alert("Hello world")
},10000);

调用setInterval()方法同样也会返回一个间歇调用ID,该ID可用于在将来某个时刻取消间歇调用。
要取消尚未执行的间歇调用,可以使用clearInterval()方法并传入想对应的间歇调用ID。取消间歇调用的重要性要远远高于取消超时调用,,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。
例:

var num=0;
var max=10;
var intervalId=null;

function incrementNumber(){
      num++ ;

      //如果执行次数达到了max设定的值,到取消后续尚未执行的调用
      if(num == max){
          clearInterval(intervalId);
          alert("Done");
      }
}
intervalId = setInterval(incrementNumber,500);

也可以使用超时调用来实现,例:

var num=0;
var max=10;
var intervalId=null;

function incrementNumber(){
      num++ ;

      //如果执行次数达到了max设定的值,则设置另一次超时调用
      if(num < max){
         setTimeout(incrementNumber,500)
      }else{
            alert("Done");
      }
}
setTimeout(incrementNumber,500);

可见,在使用超时调用时,没有必要跟踪超时调用ID,因为每次执行代码之后,如果不再设置另一次超时调用,调用就会自行停止。
一般认为,使用超时调用来模拟间歇调用的是一种最佳模式
在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面实例中那样使用超时调用,则完全可以避免这一点。所以最好不要使用间歇调用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容