このコードをJavaScriptで実行するにはどうすればよいですか？

Question

私は、画像を変更するには、このコードを書かれている：

change = function(){ 
    for (r=0; r<6; r++){ 
     for (i = 0; i < 6 ; i++) { 
      setInterval(imgfile(number=i+1), 5000); 
     } 
    } 
} 

imgfile= function(number){ 
    a = 'document.getElementById("imgdiv").src = "images/'+number+'.svg"'; 
    eval(a); 
} 

ボタンがクリックされたときに機能change()が呼び出されます。 ボタンを押すと、画像が1,2,3,4,5,6という順番で6回繰り返されるように、画像が6.svgにまっすぐに変わります。 setIntervalをchange.setIntervalまたはimgfile.setIntervalに変更すると、まったく動作しません。これをどうやって解決するのですか？

Answer 1

change = function(i=0){ 
     imgfile(i%6+1);//change image 
     if(i<36) setTimeout(change,5000,i+1);//next image in 5 seconds 
} 

imgfile= function(number){ 
    document.getElementById("imgdiv").src = "images/"+number+".svg";//no need to use ev(i||a)l 
} 

...このコード意志6回5秒の遅れで6枚を超えると、そのループ。 ..

Answer 2

あなたはしたいsetTimeout()。

setTimeoutは、ミリ秒の値を一時停止してからコードを実行します。 setIntervalはミリ秒ごとにコードを実行します。

えええええええええええええええええええええええええええるのはsetIntervalです。

setInterval関数の代わりに、forループ内にこの例があります。あなたは、単に画像を変更した後、自動的に再起動タイムアウトを開始することができます代わりに、ループ/間隔混乱の

setTimeout(imgfile(i+1), 5000); 

Answer 3

私はかなりの用途がありますが、このシナリオを非常に簡単に処理できる素敵なユーティリティ機能を書いています。主な問題は、異なる遅延の設定の間に時間が経過していないことです。したがって、あなたは5000ms以内にすべての6つの異なる動作を設定しており、すべて同じ瞬間に発生します。

はここにここに私のoriginal answer

をだあなたの問題への応用とともに、その解答するためのユーティリティ関数です。

function doHeavyTask(params) { 
 
    var totalMillisAllotted = params.totalMillisAllotted; 
 
    var totalTasks = params.totalTasks; 
 
    var tasksPerTick = params.tasksPerTick; 
 
    var tasksCompleted = 0; 
 
    var totalTicks = Math.ceil(totalTasks/tasksPerTick); 
 
    var initialDelay = params.initialDelay; 
 
    var interval = null; 
 
     
 
    if (totalTicks === 0) return; 
 
    
 
    var doTick = function() { 
 
    var totalByEndOfTick = Math.min(tasksCompleted + tasksPerTick, totalTasks); 
 
    
 
    do { 
 
     params.task(tasksCompleted++); 
 
    } while(tasksCompleted < totalByEndOfTick); 
 
     
 
    if (tasksCompleted >= totalTasks) clearInterval(interval); 
 
    }; 
 
    
 
    // Tick once immediately, and then as many times as needed using setInterval 
 
    if (!initialDelay) doTick(); 
 
    if (tasksCompleted < totalTicks) interval = setInterval(doTick, totalMillisAllotted/totalTicks); 
 
} 
 

 
// Do 6 actions over the course of 5000 x 6 milliseconds 
 
doHeavyTask({ 
 
    totalMillisAllotted: 5000 * 6, 
 
    totalTasks: 6, 
 
    tasksPerTick: 1, 
 
    initialDelay: false, // Controls if the 1st tick should occur immediately 
 
    task: function(n) { console.log('Set image to "images/' + (n + 1) + '.svg"'); } 
 
});

Answer 4

おそらくこのような何か、？

var index, imgCount, loopCount, imgTag, countdown; 

index = 0; 
imgCount = 6; 
loopCount = 6; 
imgTag = document.getElementById('imgdiv'); 

countdown = function() { 
    if (index < imgCount * loopCount) { 
    imgTag.src = 'images/' + index % imgCount + '.svg'; 
    index = index + 1; 
    setTimeout(countdown, 5000); 
    } 
}; 

countdown(); 

ここでは、二重ループを回避し、モジュラ演算（index％imgCount）を使用して正しいファイル番号を取得します。