<ul id="60akc"></ul>

<fieldset id="60akc"></fieldset>

for循環(huán)里使用 setTimeout 和回調(diào)函數(shù) 常見的問題

newtrek 發(fā)布于2019-08-20 14:23 / 2589人閱讀

摘要：問題一位同學在循環(huán)里連續(xù)發(fā)送了個請求，然后在的回調(diào)函數(shù)里使用了自增變量，但是值并不總能達到他的正確期望，經(jīng)常出現(xiàn)問題。解決方法把或部分抽離成一個函數(shù)，然后傳值調(diào)用它。這樣在函數(shù)里會保存的一個副本，從而保證和期望效果一致。

問題

一位同學在for循環(huán)里連續(xù)發(fā)送了4個ajax請求，然后在success的回調(diào)函數(shù)里使用了自增變量i，但是i值并不總能達到他的正確期望，經(jīng)常出現(xiàn)問題。

我把這個問題同理描述為setTimeout的使用：

// 代碼一
for (var i = 0; i < 4; i++) {
    setTimeout(function(){
        console.log(i);
    }, 0);
}
// 輸出結(jié)果如下
// 4
// 4
// 4
// 4

原因

JavaScript是單線程執(zhí)行的，setTimeout函數(shù)會被放到任務隊列里等待執(zhí)行（即使等待時間為0），當for循環(huán)執(zhí)行完之后，i的值已經(jīng)變成了 4

ajax請求的回調(diào)函數(shù)也是這樣，加上同時發(fā)送多個請求，它們的返回順序也并不總是和發(fā)送順序一致。

解決方法

把setTimeout或ajax部分抽離成一個函數(shù)，然后傳值調(diào)用它。這樣在函數(shù)里會保存i的一個副本，從而保證和期望效果一致。

// 代碼二
function callback(temp){
    setTimeout(function(){
        console.log(temp);
    }, 0);
}
for (var i = 0; i < 4; i++) {
    callback(i);
}
// 輸出結(jié)果如下
// 0
// 1
// 2
// 3

GPU云服務器云服務器 js for循環(huán)回調(diào) js中回調(diào)函數(shù)問題關(guān)于購買云主機和主機托管的常見問題 for循環(huán)和foreach

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81598.html

相關(guān)文章

[Javascript實驗課]循環(huán)中的閉包

摘要：執(zhí)行出來的結(jié)果是這樣的實驗發(fā)現(xiàn)，無論如何都在最后執(zhí)行，這證實了我們之前遇到的問題，因為在循環(huán)結(jié)束才執(zhí)行，所以回調(diào)函數(shù)調(diào)用的取值必然是循環(huán)的最后一次。前言 https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Closures MDN上描述閉包的章節(jié)闡述了一個由于閉包產(chǎn)生的常見錯誤，代碼片段是這樣的 for (var i...

teren 2019-08-22 11:28 評論0 收藏0
Javascript 面試中經(jīng)常被問到的三個問題！

摘要：相反，在討論時，面試中通常會提到三件事。而認為最后一個參賽者說了算，只要還能吃的，就重新設(shè)定新的定時器。試想，如果用戶的操作十分頻繁他每次都不等設(shè)置的時間結(jié)束就進行下一次操作，于是每次都為該用戶重新生成定時器，回調(diào)函數(shù)被延遲了不計其數(shù)次。本文不是討論最新的 JavaScript 庫、常見的開發(fā)實踐或任何新的 ES6 函數(shù)。相反，在討論 JavaScript 時，面試中通常會提到三件事。我自己...

chnmagnus 2019-05-23 12:20 評論0 收藏0
Javascript 面試中經(jīng)常被問到的三個問題！

摘要：相反，在討論時，面試中通常會提到三件事。通過對事件對應的回調(diào)函數(shù)進行包裹以自由變量的形式緩存時間信息，最后用來控制事件的觸發(fā)頻率。而認為最后一個參賽者說了算，只要還能吃的，就重新設(shè)定新的定時器。 showImg(https://segmentfault.com/img/bVboH5x?w=1000&h=750); 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！本...

PrototypeZ 2019-08-23 15:34 評論0 收藏0
大話javascript 4期：事件循環(huán)（2）

摘要：只要指定過回調(diào)函數(shù)，這些事件發(fā)生時就會進入任務隊列，等待主線程讀取。三主線程從任務隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為事件循環(huán)。一、任務隊列同步任務與異步任務的由來單線程就意味著，所有任務需要排隊，前一個任務結(jié)束，才會執(zhí)行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等著。如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候C...

李昌杰 2019-08-23 16:27 評論0 收藏0
夯實基礎(chǔ)-JavaScript異步編程

摘要：調(diào)用棧被清空，消息隊列中并無任務，線程停止，事件循環(huán)結(jié)束。不確定的時間點請求返回，將設(shè)定好的回調(diào)函數(shù)放入消息隊列。調(diào)用棧執(zhí)行完畢執(zhí)行消息隊列任務。請求并發(fā)回調(diào)函數(shù)執(zhí)行順序無法確定。異步編程 JavaScript中異步編程問題可以說是基礎(chǔ)中的重點，也是比較難理解的地方。首先要弄懂的是什么叫異步？我們的代碼在執(zhí)行的時候是從上到下按順序執(zhí)行，一段代碼執(zhí)行了之后才會執(zhí)行下一段代碼，這種方式...

shadowbook 2019-08-22 17:16 評論0 收藏0