如何延遲這段代碼在JavaScript中運行？

我寫了這個代碼更改圖像：如何延遲這段代碼在JavaScript中運行？

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()一個按鈕被點擊時被調用。當我按下按鈕時，圖像將直接變爲6.svg，當我想要它通過圖像1,2,3,4,5,6並重復6次。當我將setInterval更改爲change.setInterval或imgfile.setInterval時，它根本不起作用。我該如何解決？

來源

2017-04-16 Henry

爲什麼'eval（）'？ O.o – Andreas

'eval'的一個規則：不要使用eval，因爲eval是邪惡的。 – Frxstrem

你需要用'let'關鍵字來阻止你的''''變量的範圍，或者把它封裝在一個閉包中！ –

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倍。 ..

來源

2017-04-16 15:05:42

-1

你想做setTimeout()。

setTimeout爲millesecond值暫停，然後執行代碼。凡setInterval運行代碼無論milleseconds。

是的，不要做change.setInterval什麼的，它只是setInterval。

一個例子是你會在for循環中取代setInterval函數。

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

來源

2017-04-16 15:03:56

請不要試圖教導別人，你不太瞭解自己。 setTimeout（imgfile（number = i + 1），5000）;將立即調用imgfile **現在** –

哦，我明白了，我只是把他的代碼。但是，這個參數沒有多大意義。 –

對於另一個問題，我寫了一個很好的實用函數，有很多用途，但也可以很容易地處理這種情況。主要問題是在設定的不同延遲之間沒有時間流逝。所以你在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"'); } 
 
});

來源

2017-04-16 15:05:59

它總是一個好主意，用不少代碼解決不了解決方案的新手......;） –

這樣的事情，也許？

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();

在這裏，我們避免雙循環和使用模塊化數學（索引％imgCount）來獲取正確的文件編號。

來源

2017-04-16 16:21:00

如何延遲這段代碼在JavaScript中運行？

回答

相關問題