Задержка Javascript

Question

Я понимаю, что Javascript не имеет метода задержки (500), который задерживает выполнение в течение 500 миллисекунд, поэтому я пытался обойти это с помощью setTimeout и setInterval.

for(var i =0; i< 10; i++){ 
    /* Animation Code */ 
    var doNothing = function(){var m =5;} 
    setTimeout(doNothing, 50); 
} 

Однако, похоже, что это не сработало. Мне по существу нужен какой-то код, который останавливает выполнение для n миллисекунд, а затем продолжает выполнение.

Answer 1

Практически говоря, вы не можете этого сделать. Покончите с этим и найдите способ, основанный на обратном вызове. Обычно это означает, что все должно произойти после задержки в обратном вызове.

Например, вы не можете сделать это, чтобы сделать baz ждать:

foo(); 
setTimeout(function() { 
    bar(); 
}, 500); 
baz(); 

так что вы делаете единственное, что вы можете:

foo(); 
setTimeout(function() { 
    bar(); 
    baz(); 
}, 500); 

Answer 2

setInterval() - выполняет функцию, снова и снова снова, с заданными временными интервалами

Чтобы передать функцию в виде строки, обязательно добавьте имя функции с помощью круглые скобки. window.setInterval ("someFunction()", 5000);

При передаче указателя функции не включайте круглые скобки. window.setInterval (someFunction, 5000);

var timer_id = setInterval (doNothing, 500);

Если вы хотите, чтобы остановить выполнение сделать timer_id переменную глобальной

clearInterval (timer_id);

Answer 3

setInterval() Метод ждать заданное количество миллисекунд, а затем выполнить указанную функцию, и она будет продолжать выполнять функции, один раз в каждый данный интервал времени.
Синтаксис

window.setInterval("javascript function",milliseconds); 

Метод window.setInterval() могут быть записаны без префикса окна.

Первым параметром setInterval() должна быть функция.
Как остановить выполнение?
Метод clearInterval() используется для остановки дальнейших исполнений функции, указанной в методе setInterval().

Синтаксис

window.clearInterval(intervalVariable) 

window.clearInterval() метод может быть записан без префикса окна.

Чтобы иметь возможность использовать метод clearInterval(), вы должны использовать глобальную переменную при создании метода интервальной:

myVar=setInterval("javascript function",milliseconds); 

Тогда вы будете в состоянии остановить выполнение с помощью вызова метода clearInterval().
good refrence

Answer 4

Если вы пришли из фона языка/рамок/API, где вы могли бы приостановить исполнение с чем-то вроде Sleep или процесса ввода данных пользователя синхронно с чем-то вроде DoEvents, он не будет работать в JavaScript.

Невозможно заблокировать цикл событий JavaScript с чем-то вроде этого, по уважительной причине: отзывчивость пользовательского интерфейса. В JavaScript все асинхронно. Вы можете использовать setTimeout, чтобы что-то сделать с событием таймера, но пользователь все еще может получить доступ к пользовательскому интерфейсу между событиями таймера или даже перейти от страницы.

Чтобы адресовать фрагмент кода, то, что вы ищете, называется асинхронным конечным автоматом. Это позволяет сохранить состояние кода между остановкой/продолжить (в вашем случае, это состояние анимации, хотя i переменная является также частью):

(function() 
{ 
    var i = 0; 
    var nextStep = function() 
    { 
     if (i<10) 
     { 
      /* Animation Code */ 
      i++; 
      setTimeout(nextStep, 500); 
     } 
    } 
    nextStep(); 
})(); 

Это будет намного проще закодировать, когда все браузеры поддерживают новый yield ключевое слово:

http://pag.forbeslindesay.co.uk

на стороне записки, некоторые другие ответы предлагают использовать setInterval. Существует тонкое, но важное различие между задержка и интервал. Задержка - это время между двумя этапами. Интервал - это время , так как начался предыдущий шаг. Если каждый шаг анимации занимает 200 мс, и вы используете интервал 500 мс, фактическая задержка между двумя шагами будет равна 300 мс, а не 500 мс, как ожидается.

Answer 5

Гораздо чище и читаемый код будет, если вы используете RxJS

Вот пример:

Rx.Observable 
 
    .interval(1000) 
 
    .take(10) 
 
    .subscribe((x) => console.log(`${x}: ${new Date().toLocaleTimeString()}`))

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script>

интервал - это время задержки между анимации вызовов. В моем примере это 1000мс

тейк - количество раз, чтобы выполнить подписку - это функция

, которая будет вызываться каждые 1000 мс в 10 раз (в вашем случае это будет ваша анимация код)

Answer 6

Вот что-то, что могло бы помочь.

function delay(s , callback) 
{ 
    var fct_ref = "tmp_" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 6).toUpperCase();  
    var tmp_fct = (callback !== undefined) ? callback.toString().match(/^[^{]+\{(.*?)\}$/)[1] : ""; 

    document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend","<div id='"+fct_ref+"' style='background-color:transparent;color:transparent;position:absolute;top:"+window.scrollY+"px;left:"+window.scrollX+"px;opacity:1;transition:all "+s+"s'>-</div>"); 

    var func = new Function("return function transition"+fct_ref+"(e){ e.target.removeEventListener('transitionend' , transition"+fct_ref+", false); "+tmp_fct+" ; document.getElementById('"+fct_ref+"').parentNode.removeChild(document.getElementById('"+fct_ref+"')); };")(); 

    document.getElementById(""+fct_ref).addEventListener("transitionend", func , false); 
    document.getElementById(""+fct_ref).offsetHeight; 
    document.getElementById(""+fct_ref).style.opacity="0"; 
} 

delay(1, function() { console.log("ANIMATION_1"); }); 
delay(3, function() { console.log("ANIMATION_3"); }); 
delay(5, function() { console.log("ANIMATION_5"); });