作者Kenqr (function(){})()
看板Ajax
標題Re: [問題] setTimeout與迴圈的問題
時間Thu Nov 24 16:33:52 2016
※ 引述《shadowjohn (轉角遇到愛)》之銘言：
: ※ 引述《iamshuichi (vincent)》之銘言：
: : audioPlay=[audio1.play(), audio2.play(), audio3.play();
: : time=[0, 500, 1000];
: : for (var i=0; i<3; i++) {
: : setTimeout("audioPlay[i]", time[i]);
: : }
: : 上面這段程式，我希望audio1播完之後
: : 等待500毫秒之後播audio2
: : 再等待500毫秒後播audio3
: : 但是失敗了，我猜迴圈大概不能這樣寫吧！
: : 於是我修改了一下
: : for (var i=0; i<3; i++) {
: : setTimeout("audioPlay[i]", 500);
: : }
: : 結果還是不行，三個聲音同時出來
: : 看來JavaScript是先等500毫秒
: : 再同時執行前面的三個函數
: : 如果想達到我的目的
: : 不知道該怎麼寫呢？
: for (var i=0; i<3; i++) {
: setTimeout("audioPlay[i]", 500);
: }
: 上面這樣寫是不行的
: 請改成下面這樣
: for (var i=0;i<3; i++) {
: (function (index) { //加包的一層
: setTimeout(function () {
: audioPlay[index];
: }, 500);
: })(i); //帶入迴圈的 i 值，會變成這個加包的function，變成 index 放入
: }
: 這樣寫就不用改太多了 :)
var audioPlay = [audio1.play, audio2.play, audio3.play];
var time = [0, 500, 1000];
for(var i=0; i<3; i++) {
setTimeout(audioPlay[i], time[i]);
}
實際可執行的範例：
https://jsfiddle.net/hzrw429z/1/
第一行的 audio1.play() 拿掉括號改成 audio1.play，
因為這個陣列裡要放的是函數而不是函數的執行結果。
寫成 audio1.play() 會在執行到宣告陣列這行時就播放了，函數也沒存進陣列裡。
setTimeout 這行，"audioPlay[i]" 拿掉雙引號改成 audioPlay[i]。
因為 setTimeout 傳入字串時，是把字串內容當成函數內容執行。
原本的寫法會在時間到時取出 audioPlay 陣列第 i 項的值，
取出後沒有做任何動作，所以什麼事都沒發生。
修正的寫法會在呼叫 setTimeout 函數前先取得 audioPlay 的第 i 項，
取得的東西是一個函數，當成參數傳給 setTimeout。
所以 3 次呼叫 setTimeout 相當於：
setTimeout(audio1.play, 0);
setTimeout(audio2.play, 500);
setTimeout(audio3.play, 1000);
時間到時可以正確的分別執行 3 個函數。
這個情況不需要使用 IIFE，
因為 audioPlay[i] 是在呼叫 setTimeout 之前就已經取值了。
setTimeout 在時間到時，呼叫第一個參數的函數時已經不會用到 i，
所以即使離開迴圈後 i 的值固定是 3，對我們也沒有影響。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.193.160.70
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1479976445.A.58C.html
※ 編輯: Kenqr (123.193.160.70), 11/24/2016 16:35:57
1F：→ iamshuichi: 感謝大大的指導，這篇我比較看得懂，我研究看看！ 11/24 21:45
2F：推 iamshuichi: <audio id="audio1" src="1.wav"></audio> 11/24 22:32
3F：→ iamshuichi: <audio id="audio2" src="2.wav"></audio> 11/24 22:32
4F：→ iamshuichi: <audio id="audio3" src="3.wav"></audio> 11/24 22:33
5F：推 No: setTimeout(audio1.play, 0) 這種寫法是 anti-pattern 11/25 00:29
6F：→ No: 除非你很清楚自己在做什麼，不然不要這樣寫 11/25 00:29