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

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

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

問題

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

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

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

原因

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

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

解決方法

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81598.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

shadowbook 2019-08-22 17:16 評(píng)論0 收藏0