Блог

Главная - Вопросы по программированию - Немедленно остановить setInterval

Немедленно остановить setInterval

#javascript #jquery #css #velocity

#javascript #jquery #css #скорость

Вопрос:

Ссылка на JSFiddle

Я пытаюсь сделать фон и текст мигающими черно-белыми, затем остановить, когда вы нажимаете «Пауза», но я замечаю, что при нажатии кнопки «Пауза» возникает значительная задержка, и задержка увеличивается, чем дольше вы позволяете анимации воспроизводиться.

Я использую Velocity.js надстройка jquery для создания анимации.

     $(document).ready(function() {
  var $title = $("#title");
  var $body = $("body");

  function blackout() {
    $title.velocity({
        colorRed: ' =100%',
        colorBlue: ' =100%',
        colorGreen: ' =100%'}, {loop: 1, duration: 50});
    $body.velocity({
        backgroundColorRed: '-=100%',
        backgroundColorBlue: '-=100%',
        backgroundColorGreen: '-=100%'
        }, {loop: 1, duration: 50})
    };

  $("#play").click(function() {
  var blackoutloop = setInterval(blackout, 100);
    $("#pause").click(function() {
        clearInterval(blackoutloop);
    });
  });

});

Что вызывает эту задержку и как мне это исправить?

Комментарии:

1. ваше событие щелчка по #pause элементу должно быть установлено вне события щелчка по #play элементу, иначе вы будете создавать дополнительное событие щелчка для #pause каждого щелчка #play

2. Предупреждение об эпилепсии (быстрые вспышки в jsfiddle)

3. в Chrome у меня нет задержек

4. Странные вещи происходят, если вы нажимаете play более одного раза (он не будет приостановлен, пока вы не нажмете pause несколько раз). Вероятно, вам следует проверить, воспроизводится ли он, и не назначать другой интервал, если это так.

5. @charlietfl .velocity() вызовы используют свой собственный внутренний механизм синхронизации, так что это действительно не поможет.

Ответ №1:

Проблема в том, что ваш код неявно предполагает, что синхронизация будет выполнена идеально, но на самом деле это не так. The Velocity.js коду потребуется некоторое время на выполнение манипуляций с DOM при реализации анимации, поэтому каждые 100 миллисекунд вы запускаете анимацию, которая немного задерживается. Чем дольше вы позволяете странице выводить из строя всех эпилептиков поблизости, тем дольше будет задержка.

Если увеличить таймер для функции примерно до 150 миллисекунд, то (по крайней мере, в моей среде) она практически сразу останавливается при нажатии кнопки «пауза». Однако обратите внимание, что я исправил ошибку в вашем коде. Не настраивайте обработчик «pause» в обработчике «play». Вместо этого сделайте это:

   var blackoutloop;
  $("#play").click(function() {
    blackoutloop = setInterval(blackout, 150);
  });

  $("#pause").click(function() {
        clearInterval(blackoutloop);
  });

Кроме того, в jsfiddle:

  • Не включайте <body> тег в HTML-часть — сайт сделает это за вас
  • Если вы используете опцию «При загрузке» для своего кода (как это делает ваша скрипка), нет необходимости оборачивать код в $(document).ready() вызов, поскольку сайт поместит его в обработчик событий «load» на window .