settimeout的時(shí)間定為為0有什么用

1.JavaScript中的setTimeout()可用來延遲執(zhí)行一段代碼闲坎,如:

setTimeout(function() {

? ? ? ? alert("Hello?World");

},?1000)//延時(shí)1秒

2.今天在網(wǎng)上看到了setTimeout(fn, 0)的用法值漫,感到有些疑惑,不明白它和直接執(zhí)行fn()有什么區(qū)別柑潦,遂去搜集了一下相關(guān)的資料,順便分享分享。

functiona() {

? ? ? ?setTimeout(function(){

? ? ? ? alert(1)

},?0);

alert(2);

}

a();

代碼中的setTimeout設(shè)為 0鹃答,也就是延遲 0ms干厚,看上去是不做任何延遲立刻執(zhí)行李滴,即依次彈出 “1”、“2”蛮瞄。但實(shí)際的執(zhí)行結(jié)果確是 “2”所坯、“1”。其中的原因得從setTimeout的原理說起:

javascript是單線程執(zhí)行的挂捅,也就是無法同時(shí)執(zhí)行多段代碼芹助,當(dāng)某一段代碼正在執(zhí)行的時(shí)候,所有后續(xù)的任務(wù)都必須等待闲先,形成一個(gè)隊(duì)列状土,一旦當(dāng)前任務(wù)執(zhí)行完畢,再從隊(duì)列中取出下一個(gè)任務(wù)饵蒂。這也常被稱為 “阻塞式執(zhí)行”声诸。所以一次鼠標(biāo)點(diǎn)擊,或是計(jì)時(shí)器到達(dá)時(shí)間點(diǎn)退盯,或是 Ajax 請(qǐng)求完成觸發(fā)了回調(diào)函數(shù)彼乌,這些事件處理程序或回調(diào)函數(shù)都不會(huì)立即運(yùn)行泻肯,而是立即排隊(duì),一旦線程有空閑就執(zhí)行慰照。假如當(dāng)前 JavaScript 進(jìn)程正在執(zhí)行一段很耗時(shí)的代碼灶挟,此時(shí)發(fā)生了一次鼠標(biāo)點(diǎn)擊,那么事件處理程序就被阻塞毒租,用戶也無法立即看到反饋稚铣,事件處理程序會(huì)被放入任務(wù)隊(duì)列,直到前面的代碼結(jié)束以后才會(huì)開始執(zhí)行墅垮。如果代碼中設(shè)定了一個(gè)setTimeout惕医,那么瀏覽器便會(huì)在合適的時(shí)間,將代碼插入任務(wù)隊(duì)列算色,如果這個(gè)時(shí)間設(shè)為 0抬伺,就代表立即插入隊(duì)列,但不是立即執(zhí)行灾梦,仍然要等待前面代碼執(zhí)行完畢峡钓。所以setTimeout并不能保證執(zhí)行的時(shí)間,是否及時(shí)執(zhí)行取決于 JavaScript 線程是擁擠還是空閑若河。

3.至于這樣的寫法有什么作用能岩,看下面的例子。

<input type="text" onkeydown="show(this.value)">

<div></div>

<script>

function show(val) {

? ? ? ? ? document.getElementsByTagName('div')[0].innerHTML = val;

}

</script>

這里綁定了keydown事件萧福,意圖是當(dāng)用戶在文本框里輸入字符時(shí)拉鹃,將輸入的內(nèi)容實(shí)時(shí)地在

中顯示出來。但是實(shí)際效果并非如此

可以發(fā)現(xiàn)统锤,每按下一個(gè)字符時(shí)毛俏,

中只能顯示出之前的內(nèi)容,無法得到當(dāng)前的字符饲窿。這時(shí)就可以利用setTimeout(0):

原因是煌寇,當(dāng)用戶按下按鍵的時(shí)候,JavaScript 引擎需要執(zhí)行keydown的事件處理程序逾雄,然后更新文本框的value值阀溶,這兩件事也需要按順序來,事件處理程序執(zhí)行時(shí)鸦泳,更新value值的任務(wù)則進(jìn)入隊(duì)列等待银锻。所以我們?cè)趉eydown的事件處理程序里是無法得到更新后的value的,利用setTimeout做鹰,我們把取value的操作放入隊(duì)列击纬,放在更新value值以后,這樣便達(dá)到了目的钾麸。示例如下更振,可以發(fā)現(xiàn)已經(jīng)能夠?qū)崟r(shí)顯示輸入的內(nèi)容炕桨。

有人可能會(huì)想到利用綁定keyup事件來解決,但是onkeyup有一個(gè)問題肯腕,就是當(dāng)一直按著某個(gè)鍵不放時(shí)献宫,也會(huì)無法得到輸入內(nèi)容,因?yàn)榇藭r(shí)不斷地觸發(fā)keydown和keypress实撒,直到用戶松起時(shí)才會(huì)觸發(fā)keyup姊途。當(dāng)然,示例所用的keydown也存在一些小缺點(diǎn)知态,比如用戶如果使用右鍵粘貼捷兰,則無法得到粘貼的內(nèi)容。

所以最理想的方案應(yīng)該是使用HTML5的input事件肴甸,當(dāng)文本框或textarea的value發(fā)生變化時(shí)寂殉,就會(huì)觸發(fā)此事件,對(duì)粘貼也可以很好地兼容原在。至于 IE9 之前的瀏覽器,需要使用專有的onpropertychange事件彤叉。

settimeout(0)就起到了一個(gè)將事件加入到隊(duì)列中庶柿,待執(zhí)行的一個(gè)功能效果!


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末秽浇,一起剝皮案震驚了整個(gè)濱河市浮庐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌柬焕,老刑警劉巖审残,帶你破解...
    沈念sama閱讀 221,820評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異斑举,居然都是意外死亡搅轿,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門富玷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來璧坟,“玉大人,你說我怎么就攤上這事赎懦∪妇椋” “怎么了?”我有些...
    開封第一講書人閱讀 168,324評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵励两,是天一觀的道長(zhǎng)黎茎。 經(jīng)常有香客問我,道長(zhǎng)当悔,這世上最難降的妖魔是什么傅瞻? 我笑而不...
    開封第一講書人閱讀 59,714評(píng)論 1 297
  • 正文 為了忘掉前任迁酸,我火速辦了婚禮,結(jié)果婚禮上俭正,老公的妹妹穿的比我還像新娘奸鬓。我一直安慰自己,他們只是感情好掸读,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6 397
  • 文/花漫 我一把揭開白布串远。 她就那樣靜靜地躺著,像睡著了一般儿惫。 火紅的嫁衣襯著肌膚如雪澡罚。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,328評(píng)論 1 310
  • 那天肾请,我揣著相機(jī)與錄音留搔,去河邊找鬼。 笑死铛铁,一個(gè)胖子當(dāng)著我的面吹牛隔显,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播饵逐,決...
    沈念sama閱讀 40,897評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼括眠,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了倍权?” 一聲冷哼從身側(cè)響起掷豺,我...
    開封第一講書人閱讀 39,804評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎薄声,沒想到半個(gè)月后当船,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡默辨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3 340
  • 正文 我和宋清朗相戀三年德频,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片廓奕。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡抱婉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出桌粉,到底是詐尸還是另有隱情蒸绩,我是刑警寧澤,帶...
    沈念sama閱讀 36,238評(píng)論 5 350
  • 正文 年R本政府宣布铃肯,位于F島的核電站患亿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜步藕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3 334
  • 文/蒙蒙 一惦界、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧咙冗,春花似錦沾歪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至立润,卻和暖如春狂窑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背桑腮。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評(píng)論 1 272
  • 我被黑心中介騙來泰國打工泉哈, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人破讨。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3 376
  • 正文 我出身青樓丛晦,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親添忘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子采呐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • JavaScript提供定時(shí)執(zhí)行代碼的功能,叫做定時(shí)器(timer)搁骑,主要由setTimeout()和setInt...
    晚晴幽草閱讀 1,657評(píng)論 1 18
  • 計(jì)時(shí)器setTimeout是我們經(jīng)常會(huì)用到的,它用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式又固。 語法:setTimeo...
    TGCode閱讀 882評(píng)論 0 8
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理仲器,服務(wù)發(fā)現(xiàn),斷路器仰冠,智...
    卡卡羅2017閱讀 134,702評(píng)論 18 139
  • setInterval(function,milliseconds,param1,param2,...) code...
    你聽cmy1994閱讀 738評(píng)論 0 1
  • 一洋只、實(shí)驗(yàn)說明 1.1 實(shí)驗(yàn)內(nèi)容 生活中辆沦,我們?cè)诘卿浳⒉]箱的時(shí)候识虚,常常會(huì)碰到驗(yàn)證碼肢扯。在工作時(shí),如果想要爬取一些數(shù)...
    海人為記閱讀 5,427評(píng)論 1 4