Question

Here is my code:

 var timeout = 0;

function start() {
    for (var i = 0; i < 1000; i += 50) {
        timeout = setTimeout(function () {
            aRandomNumber1 = random();
            aRandomNumber2 = random();
            aRandomNumber3 = random();

            document.getElementById('field1').innerHTML = '<img src="' + img[aRandomNumber1] + '" alt="Bild1">';
            document.getElementById('field2').innerHTML = '<img src="' + img[aRandomNumber2] + '" alt="Bild2">';
            document.getElementById('field3').innerHTML = '<img src="' + img[aRandomNumber3] + '" alt="Bild3">';
        }, i);
    }

    clearTimeout(timeout);
    timeout = 0;

The images aren't stopping on this point. There should be changed at the next step.

Answer 1

You are overwriting the reference to timeout each iteration, so you are only having the reference to the last timeout stored. You can try to save all references to timeouts into an array e.g. timeouts, and after that loop through the array and clear each invoked timeout;

var timeouts = [];

function start() {
    for (var i = 0; i < 1000; i += 50) {
        var timeout = setTimeout(function () {
            aRandomNumber1 = random();
            aRandomNumber2 = random();
            aRandomNumber3 = random();

            document.getElementById('field1').innerHTML = '<img src="' + img[aRandomNumber1] + '" alt="Bild1">';
            document.getElementById('field2').innerHTML = '<img src="' + img[aRandomNumber2] + '" alt="Bild2">';
            document.getElementById('field3').innerHTML = '<img src="' + img[aRandomNumber3] + '" alt="Bild3">';
        }, i);
       timeouts.push(timeout);
    }
function clearTimeouts(){
   timeouts.forEach(timeout =>{ clearTimeout(timeout);});
   timeouts = [];
}
// stopping all timeouts after 1000 ms
setTimeout(clearTimeouts, 1000);

Answer 2

正如其他人所说，这一行：

        timeout = setTimeout(function () {

只是重新创建一个名为timeout的变量，而不是创建它的新实例。当你可以做的时候，将超时作为一个对象。对象是充当＆＃34;模板的功能＆＃34;为了创建更多自己的实例，所以你实际上会有1000个不同的setTimeout函数。

var timeout = 0;
//Store all created functions
var functions = [];

function start() {
    //Create 1000 objects and store them in the array
    for (var i = 0; i < 1000; i++) {
        functions.push(new Timeout());
    }

    function Timeout() {
        this.timeout = setTimeout(function () {
            aRandomNumber1 = random();
            aRandomNumber2 = random();
            aRandomNumber3 = random();

            document.getElementById('field1').innerHTML = '<img src="' + img[aRandomNumber1] + '" alt="Bild1">';
            document.getElementById('field2').innerHTML = '<img src="' + img[aRandomNumber2] + '" alt="Bild2">';
            document.getElementById('field3').innerHTML = '<img src="' + img[aRandomNumber3] + '" alt="Bild3">';
            }, i);
        }
    }

for (var i = 0; i < functions.length; i++) {
    functions[i].clearInterval(functions[i].timeout);
}

timeout = 0;

clearTimeout does not work proberly

2 个答案: