SetTimeout Overlapping?

Question

Это часть моего кода. Изображение становится видимым через 23 миллисекунды правильно, но никогда не возвращается к скрытому, как сообщает вторая строка. Если я изменю его с 17 миллисекунд на значение, превышающее 23 миллисекунды, он будет работать. И наоборот, если я меняю первую строку на 16 миллисекунд, она работает. Похоже, что вторая строка выполняется и завершается перед первой строкой, и поэтому она остается видимой. Как я могу это исправить?

setTimeout(function(){img.style.visibility = 'visible';},23); 
setTimeout(function(){img.style.visibility = 'hidden';},17); 

Answer 1

Это потому, что 17 меньше 23. Код setTimeout является асинхронным, вторая строка не ждет завершения первого. Они оба запускают и регистрируют время для выполнения.

Если вы хотите, чтобы это было 17 миллисекунд позже, вы должны были бы сделать 23 + 17

Answer 2

Оба этих линий выполнить один за другим. Затем, позже, вызываются функции, которые вы передали в setTimeout. Их называют в соответствии с задержкой, которую вы дали. Поэтому, когда вы даете более короткую задержку ко второму, конечно, его сначала называют.

Если ваша цель, чтобы иметь IMG становится видимым после 23 миллисекунд, а затем невидимые снова 17 миллисекунды позже, вы хотите поставить второй вызов внутри первыми.

setTimeout(function(){ 
    img.style.visibility = 'visible'; 
    setTimeout(function(){ 
     img.style.visibility = 'hidden'; 
    }, 17); 
}, 23); 

Это говорит о том, что люди - медленные, неуклюжие существа. :-) Для обычного человека этот образ в принципе никогда не будет видимым, 17 мс - слишком короткий интервал.

Answer 3

setTimeout() вызывает подпроцесс с задержкой. Таким образом, вторая строка выполняется до первого.

Answer 4

Это как setTimout работает

setTimeout(function(){img.style.visibility = 'visible';},23);//execute after 23 ms 
setTimeout(function(){img.style.visibility = 'hidden';},17);//execute after 17 ms 

. 
. 
. 
17 ms passed -> function(){img.style.visibility = 'hidden';} 
. 
. 
. 
23 ms passed -> function(){img.style.visibility = 'visible';} 

То, что вы, вероятно, хотите,

setTimeout(function() { 
    img.style.visibility = 'visible'; 
    setTimeout(function() { 
     img.style.visibility = 'hidden'; 
    }, 17); 
}, 23); 

Тогда это будет выглядеть

. 
. 
. 
23 ms passed -> function(){img.style.visibility = 'visible'; 
       setTimeout(function(){img.style.visibility = 'hidden';},17);} 
. 
. 
. 
40 ms passed -> function(){img.style.visibility = 'hidden';}