Как поставить задержку для функции в JavaScript? [Дубликат]

1

Я новичок в программировании и кодировании, и мне нужна помощь в небольшом проекте. Мне нужно установить небольшую задержку времени, прежде чем функция активируется. Я использую холст HTML5 и пытаюсь воссоздать понг. Во всяком случае, хотелось бы поместить небольшую задержку перед ballReset() функции ballReset(). Кроме того, это не весь скрипт, это просто та часть, где ballReset() функция ballReset().

function moveEverything() {
    computerMovement();

    ballX = ballX + ballSpeedX;
    ballY = ballY + ballSpeedY;

    if(ballX < 0) {
        if(ballY > paddle1Y &&
            ballY < paddle1Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();
            player2Score++;
        }
    }

    if(ballX > canvas.width) {
        if(ballY > paddle2Y &&
            ballY < paddle2Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();    
            player1Score++;
        }
    }
    if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
    }
    if(ballY > canvas.height) {
        ballSpeedY = -ballSpeedY;
    }
}
Теги:

2 ответа

1

Существует два (в основном используемых) типа таймера в javascript setTimeout и setInterval (другие)

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

setTimeout выполняется только один раз после задержки, тогда как setInterval продолжает вызывать функцию обратного вызова после каждой задержки.

оба этих метода возвращают целочисленный идентификатор, который может быть использован для их очистки до истечения таймера.

clearTimeout и clearInterval оба этих метода принимают целочисленный идентификатор, возвращаемый из вышеперечисленных функций setTimeout и setInterval

Пример:

SetTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

Если вы запустите указанный выше код, вы увидите, что он предупреждает before setTimeout а затем after setTimeout наконец, он оповещает I am setTimeout после 1сек (1000 мс)

Из примера setTimeout(...) что setTimeout(...) является асинхронным, что означает, что он не дожидается истечения таймера перед тем, как перейти к следующему оператору, т.е. alert("after setTimeout");

Пример:

setInterval

alert("before setInterval"); //called first

 var tid = setInterval(function(){
        //called 5 times each time after one second  
      //before getting cleared by below timeout. 
        alert("I am setInterval");
   },1000); //delay is in milliseconds 

  alert("after setInterval"); //called second

setTimeout(function(){
     clearInterval(tid); //clear above interval after 5 seconds
},5000);

Если вы запустите указанный выше код, вы увидите, что он оповещает before setInterval а затем after setInterval наконец, он предупреждает, I am setInterval 5 раз после 1 с (1000 мс), потому что setTimeout очищает таймер через 5 секунд или через каждые 1 секунду вы будете получать предупреждение I am setInterval бесконечно.

Как браузер это делает?

Я объясню вкратце.

Чтобы понять, что вы должны знать о очереди событий в javascript. В браузере реализована очередь событий. Всякий раз, когда событие запускается в js, все эти события (например, щелчок и т.д.) Добавляются в эту очередь. Когда вашему браузеру нечего выполнять, он принимает событие из очереди и выполняет их по очереди.

Теперь, когда вы вызываете setTimeout или setInterval ваш обратный вызов регистрируется в таймере в браузере, и он добавляется в очередь событий по истечении заданного времени, и в конечном итоге javascript принимает событие из очереди и выполняет его.

Это происходит так, потому что механизм javascript однопоточный, и они могут выполнять только одну вещь за раз. Таким образом, они не могут выполнять другие javascript и отслеживать ваш таймер. Вот почему эти таймеры регистрируются в браузере (браузер не является однопоточным), и он может отслеживать таймер и добавлять событие в очередь после истечения таймера.

то же самое происходит и для setInterval только в этом случае событие добавляется в очередь снова и снова после указанного интервала до тех пор, пока он не будет очищен или обновлена страница браузера.

Заметка

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

Следовательно, ваш обратный вызов может когда-то больше, чем указанное время задержки, вызываться специально, когда ваш другой код блокирует поток и не дает ему времени для обработки того, что там в очереди.

И поскольку я упоминал, что javascript - это один поток. Итак, если вы долго блокируете поток.

Как этот код

while(true) { //infinite loop 
}

Пользователь может получить сообщение о том, что страница не отвечает.

  • 0
    Я добавлю ваш ответ, если вы добавите примеры кода. Я знаю синтаксис, но наш OP является новым для кодирования, поэтому они не могут.
0

То, что вы ищете, это setTimeout fn, и передать fn ballReset() в качестве обратного вызова!

Например, задержка на 3000 мс,

setTimeout(function () {
  ballReset()
}.bind(this), 3000)

Вы можете найти больше о setTimeout на следующей странице документации https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

  • 0
    Как указано в OP, они новички в кодировании, я думаю, стоит упомянуть, что setTimeout является асинхронным и не задерживает выполнение
  • 3
    Какой смысл анонимной функции быть привязанной к this и не использовать ее внутри?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню