的jQuery的setTimeout：在行第一動作不工作（解決和樣本）

Question

在我的小程序 https://jsfiddle.net/Skaidrius/99a48obf/6/ 你可以把按鈕顯示的舉動有些序列prewriten在（色塊改變顏色爲白色，背面）數組'seq'。這是用功能做的。

setTimeout(fn(){}, time) 

Console.log顯示一切正常，但不幸的是顏色變化從2步開始。

請幫助解決這個問題（我想我應該改變一些超時設置，但我已經搜索了很多，並試圖糾正它沒有成功）。

這是更新jsfiddle。也許有人會發現它有用https://jsfiddle.net/Skaidrius/99a48obf/53/

Answer 1

使用i+1在setTimeout()因爲each()第一指數從0開始

$(document).ready(function() { 
 
    function series() { 
 
    seq = [1, 2, 3, 1]; 
 
    $.each(seq, function(i) { 
 
     var $seq = $('#div' + seq[i]); 
 
     setTimeout(function() { 
 
     $seq.toggleClass('white'); 
 
     }, (i + 1) * 500); 
 
     setTimeout(function() { 
 
     $seq.toggleClass('white'); 
 
     }, (i + 1) * 700); 
 
    }) 
 
    } 
 
    $('#btn').on('click', series); 
 
})

.div { 
 
    position: relative; 
 
    width: 110px; 
 
    height: 100px; 
 
    background-color: green; 
 
    border: 1px dashed black; 
 
    float: left; 
 
} 
 

 
.div span { 
 
    position: relative; 
 
    top: 45px; 
 
    left: 45px; 
 
    color: white; 
 
} 
 

 
.main { 
 
    width: 230px; 
 
} 
 

 
.white { 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class='main'> 
 
    <div class="div" id="div1"> 
 
    <span>1</span> 
 
    </div> 
 
    <div class="div" id="div2"> 
 
    <span>2</span> 
 
    </div> 
 
    <div class="div" id="div3"> 
 
    <span>3</span> 
 
    </div> 
 
    <div class="div" id="div4"> 
 
    <span>4</span> 
 
    </div> 
 
</div> 
 
<button id="btn"> 
 
    Press to wave!!! 
 
</button>

Answer 2

在你的代碼序列爲「序列= [1， 2,3,1];「但如果你想從你的數組中的第一項開始不是「seq = [0,1,2,1];」？由於數組中的項目是0索引，所以第一個將是0.