作者iamshuichi (vincent)
標題Re: [問題] setTimeout與迴圈的問題
時間Thu Nov 24 22:44:07 2016
<html>
<audio id="audio1" src="1.wav"></audio>
<audio id="audio2" src="2.wav"></audio>
<audio id="audio3" src="3.wav"></audio>
<button onclick="play()">Start</button>
<script>
var play = function() {
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]);
}
}
</script>
</html>
您的範例我看到了，是可以正常執行的
但是我套用上去就不行了
到底是發生了什麼事？？？
>_<
※ 引述《Kenqr (function(){})()》之銘言：
: ※ 引述《shadowjohn (轉角遇到愛)》之銘言：
: : 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), 來自: 104.237.91.152
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1479998651.A.2EF.html
1F：推 eight0: 這和this有關 把 audioX.play 改成 function(){ 11/24 23:41
2F：→ eight0: audioX.play()} 11/24 23:41
3F：推 TETZ: 應該是audioPlay[i]要變成audioPlay[i]()吧 11/25 00:38
4F：→ TETZ: 欸不對 原本那樣應該ok不然就是用樓上的方法 11/25 00:40
5F：→ xdraculax: 加上 document.getElementById 11/25 07:01