Блог

Главная - Вопросы по программированию - Есть ли способ выполнить функцию JavaScript / jQuery на моей html-странице в течение определенного периода времени, а затем остановить выполнение?

Есть ли способ выполнить функцию JavaScript / jQuery на моей html-странице в течение определенного периода времени, а затем остановить выполнение?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

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

Я пытался использовать setInterval() и clearInterval() , а также комбинировать / вкладывать их в setTimeout() . Я рассмотрел аналогичный вопрос, но попытки найти различные решения не сработали.

Моя последняя попытка была:

 var animateBackground = setInterval(function() {
    $('body').ripples({
     resolution: 1297,
     dropRadius: 10,
     perturbance: 0.04,
     });
   }, 1000);
  setTimeout(function(){
    clearInterval(animateBackground);
  }, 20000);

Я относительно новичок в веб-дизайне / кодировании и очень ценю любую помощь, которую может предоставить сообщество.

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

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

2. Понял, добавлено в качестве ответа, как было предложено. Я ценю обратную связь.

Ответ №1:

У вас есть правильный синтаксис для остановки setInterval.

Но похоже, что ripples используемый вами плагин не нужно устанавливать на интервал; он работает непрерывно, пока вы не вызовете $(selector).ripples('pause') или $(selector).ripples('destroy') .

https://github.com/sirxemic/jquery.ripples

Итак, все, что вам нужно, это

 $('body').ripples({
   resolution: 1297,
   dropRadius: 10,
   perturbance: 0.04,
});
setTimeout(function(){
  $('body').ripples('pause') // or 'destroy', or 'hide'
}, 20000);

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

1. Очень хороший улов, и мне стыдно за то, что я пытаюсь его решить, забыв перепроверить документацию по использованию. Я отмечаю это как ответ, спасибо за быстрый ответ!

2. Не беспокойтесь, рад помочь!

Ответ №2:

На этот вопрос был успешно дан ответ, и я предоставляю следующее обновление для ясности в будущем, если этот вопрос будет пересмотрен:

На случай, если кто-нибудь еще задастся этим вопросом, я заметил, что using $('body').ripples('hide') также хорошо работает, и вместо замораживания состояния воспроизведения с помощью любой ряби, которая все еще присутствует, она очищает эффект с экрана и возвращает фон статическому изображению.

Вот окончательная версия рабочего скрипта.

 <script>
    $('body').ripples({
     resolution: 1297,
     dropRadius: 10,
     perturbance: 0.04,
     });

  setTimeout(function(){
    $('body').ripples('hide');
  }, 20000);
 </script>
Метки: