タイムアウトのあるループをJqueryで実行しています

Question

idの項目にjson配列からクラスをアクティブにしたいとします。しかし、配列の秒のの後に、次の項目がクラスをアクティブにする必要があります。そして、ループを続けてください。

Index.htmlと

<div id="5"></div> 
<div id="8"></div> 
<div id="11"></div> 

Scheme.json：

[ 
    { 
     "id":"5", 
     "seconds":"3" 
    }, 
    { 
     "id":"8", 
     "seconds":"2" 
    }, 
    { 
     "id":"11", 
     "seconds":"4" 
    } 
] 

Script.js：

function loop() { 
    $.getJSON("assets/scheme.json", function(data) { 
     // 
    }); 
} 

Answer 1

SOMETこのよう興は、それを行うだろう - 一度あなただけのアイテム間の秒を蓄積する必要が

var data = [ 
 
    { 
 
     "id":"5", 
 
     "seconds":"3" 
 
    }, 
 
    { 
 
     "id":"8", 
 
     "seconds":"2" 
 
    }, 
 
    { 
 
     "id":"11", 
 
     "seconds":"4" 
 
    } 
 
]; 
 

 
// put everything below here inside your callback from getJSON 
 
function setActive(data, index){ 
 
    let item = data[index]; 
 
    setTimeout(function(){ 
 
    \t $('#' + item.id).addClass("active"); 
 
    \t if(index<data.length-1) 
 
      setActive(data,index+1); 
 
    }, item.seconds*1000) 
 
} 
 

 
// start execution at the first item 
 
setActive(data,0);

.active{ background-color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="5">Five</div> 
 
<div id="8">Eight</div> 
 
<div id="11">Eleven</div>

Answer 2

行われ、次の項目を選択的にクラスを追加するsetTimeoutを使用して、呼び出し

function loop() { 
    $.getJSON("assets/scheme.json", function(data) { 
     var seconds = 0; 
     for (let i=0; i<data.length; i++) { 
      seconds += data[i].seconds * 1000; 
      setTimeout(function(){ setActive(data[i].id)}, seconds); 
     } 
    } 
} 

Answer 3

//take off class active 
 
function unactive(){ 
 
    
 
    $(".active").removeClass("active"); 
 

 
} 
 

 
//add class active and continue recursive loop 
 
function activate(current,data){ 
 
    
 
    unactive();//unactive all before 
 
    $('#'+data[current].id).addClass("active"); 
 
    
 
    current++; 
 
    
 
    if (current<data.length){ 
 
    setTimeout(activate.bind(this,current,data),parseInt(data[current].seconds)*1000);//run again 
 
    
 
    }else{ 
 
     //here is end but we can start again from 0 
 
     setTimeout(startActive.bind(this,data),parseInt(data[current-1].seconds)*1000) 
 
     
 
    } 
 
    
 
}; 
 

 
//starts our loop 
 
function startActive(data){ 
 
    
 
    var current=0; 
 
    setTimeout(activate.bind(this,current,data),parseInt(data[current].seconds)*1000); 
 
    
 
}; 
 

 
//data from json 
 
var fromJson=[ 
 
    { 
 
     "id":"5", 
 
     "seconds":"3" 
 
    }, 
 
    { 
 
     "id":"8", 
 
     "seconds":"2" 
 
    }, 
 
    { 
 
     "id":"11", 
 
     "seconds":"4" 
 
    } 
 
]; 
 

 
//run 
 
startActive(fromJson);

.active{ 
 

 
    background:orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="5">5</div> 
 
<div id="8">8</div> 
 
<div id="11">11</div>

上記のコードは、オブジェクトコレクションからのデータを取得します（コードコレクションでは、ajaxに由来します）。再帰的ループを行います。私はまた、最後の要素の後にループを繰り返し、すべてが頼むから行く場合は、そのような繰り返しが望ましくない場合は、からの機能を有効にします。