Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как заставить mouseenter приостанавливать цикл (https://javascript.ru/forum/misc/70779-kak-zastavit-mouseenter-priostanavlivat-cikl.html)

Andreeshe 02.10.2017 13:26

Как заставить mouseenter приостанавливать цикл
 
Пытаюсь реализовать следующее: при запуске странички должны поочерёдно автоматически нажиматься кнопки (шесть штук button) на слайдере. Если посетитель заводит курсор над зоной слайдера (#screen), то цикл автоматического нажатия должен приостановиться. А когда курсор уходит с зоны слайдера, то цикл снова возобновляется (либо заново начинается).
Сейчас в коде ниже происходит так: при нажатии на кнопку пользователем раздел слайдера не успевает открыться и происходит срабатывание автоматического цикла. Как исправить? В каком направлении копать? Помогите пожалуйста.
Вот код:
var aaa =   setTimeout(function myd() {
  document.getElementById('justbutton').click()
 },10000);
 var bbb = setTimeout(function myd() {
  document.getElementById('justbutton2').click()
 },25000);
 var ccc = setTimeout(function myd() {
  document.getElementById('justbutton3').click()
 },40000);
 var ddd =  setTimeout(function myd() {
  document.getElementById('justbutton4').click()
 },55000);
 var eee =  setTimeout(function myd() {
  document.getElementById('justbutton5').click()
 },70000);
 var fff = setTimeout(function myd() {
  document.getElementById('justbutton6').click()
 },85000);
 
 $('#screen').on('mouseenter', function(){
 clearTimeout(aaa);
 clearTimeout(bbb);
 clearTimeout(ccc);
 clearTimeout(ddd);
 clearTimeout(eee);
 clearTimeout(fff);
});
 
 
$('#screen').on('mouseleave', function(){
 var aaa =   setTimeout(function myd() {
  document.getElementById('justbutton').click()
 },10000);
 var bbb = setTimeout(function myd() {
  document.getElementById('justbutton2').click()
 },25000);
 var ccc = setTimeout(function myd() {
  document.getElementById('justbutton3').click()
 },40000);
 var ddd =  setTimeout(function myd() {
  document.getElementById('justbutton4').click()
 },55000);
 var eee =  setTimeout(function myd() {
  document.getElementById('justbutton5').click()
 },70000);
 var fff = setTimeout(function myd() {
  document.getElementById('justbutton6').click()
 },85000);
});
 
 
 $('#screen .menu button').on('click', function(){
 clearTimeout(aaa);
 clearTimeout(bbb);
 clearTimeout(ccc);
 clearTimeout(ddd);
 clearTimeout(eee);
 clearTimeout(fff);
});

рони 02.10.2017 14:25

Цитата:

Сообщение от Andreeshe
должны поочерёдно автоматически нажиматься кнопки

в нормальном слайдере есть режим avto и пауза на 'mouseenter'

Andreeshe 02.10.2017 16:30

В данном слайдере такие режимы avto и пауза изначально не были предусмотрены. Слайдер разработан таким образом, чтобы именно при выборе самим Пользователем определенного раздела меню отображалась соответствующая информация. Для того, чтобы не нарушать работу слайдера в целом, мне в голову пришла идея сделать небольшую надстройку в виде организации названий разделов (куда и кликает Посетить) в кнопки (<button></button>) и написания скрипта для этих кнопок. Кнопки (они же разделы) теперь автоматически нажимаются, но clearTimeout почему-то не хочет останавливать этот цикл.

рони 02.10.2017 16:49

Andreeshe,
уберите var в строках 30 - 49

Andreeshe 02.10.2017 16:54

И сейчас при событии mouseenter (когда курсор над зоной слайдера-меню) происходит наоборот - возобновление автоматического цикла, хотя должна быть остановка с помощью clearTimeout, а возобновление только должно быть при mouseleave. Почему так?

Andreeshe 02.10.2017 17:21

Цитата:

Сообщение от рони (Сообщение 466291)
Andreeshe,
уберите var в строках 30 - 49

Спасибо Вам большое, очень помогли. У меня изначально получилось, как я понимаю, что объявил новые переменные, а не использовал старые ))


Часовой пояс GMT +3, время: 17:36.