Как остановить setInterval, запущенный mouseenter, при отпускании мыши? - PullRequest
Новая
       40

Как остановить setInterval, запущенный mouseenter, при отпускании мыши?

0 голосов
/ 24 мая 2018

Мне удалось заставить работать стрелки, которые прокручивают переполнение div на mouseenter.Проблема в том, что скрипт не только не останавливается на mouseleave, но и предотвращает прокрутку противоположной стороны div вручную.

JS 

function scroll_right() {
        var elmnt = document.getElementsByClassName("thumbnails")[0];
            elmnt.scrollLeft += 50;
        var timer = setInterval(scroll_right, 300); 
}

function kill() {
        clearInterval(timer)
}

И стрелка 

<img class="arrow" 
 onmouseenter="scroll_right()"
 onmouseleave="kill()" 
 src="https://image.flaticon.com/icons/svg/126/126490.svg">

Моя идея заключалась в том, что функция scroll_right запускается на mouseenter, а timer внутри нее деактивируется на mouseleave.

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

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

    var timer = undefined;

    function scroll_right() {
        var elmnt = document.getElementsByClassName("thumbnails")[0]; 
        elmnt.scrollLeft += 50;
        timer && clearInterval(timer);
        timer = setInterval(scroll_right, 300); 
    }

    function kill() {
        timer && clearInterval(timer)
    }

--------- thisтакое HTML-код 

<img class="arrow" 
 onmouseenter="scroll_right()"
 onmouseleave="kill()" 
 src="https://image.flaticon.com/icons/svg/126/126490.svg">
0 голосов
/ 24 мая 2018

Таймер устанавливается каждый раз при запуске функции scroll_right.Через некоторое время будет работать бесконечно много таймеров.Вы можете попробовать использовать функцию setTimeout вместо приведенной ниже.Кроме того, область действия таймера ограничена функцией в вашем коде.

var timer = undefined;

function scroll_right() {
  var elmnt = document.getElementsByClassName("thumbnails")[0];
  elmnt.scrollLeft += 50;
  if (!timer) {
    timer = setInterval(scroll_right, 300);
  }
}

function kill() {
  if (timer) {
    clearInterval(timer);
    timer = undefined;
  }
}
<div class="thumbnails" onmouseenter="scroll_right()" onmouseleave="kill()" style="width:150px;overflow:auto">
  <img class="arrow" src="https://image.flaticon.com/icons/svg/126/126490.svg" width="500px">
</div>
0 голосов
/ 24 мая 2018

Вам нужно объявить переменную таймера вне функции, которая будет использоваться другой функцией. Замените ваш JS на: 

var timer;
function scroll_right() {
    var elmnt = document.getElementsByClassName("thumbnails")[0];
    elmnt.scrollLeft += 50;
    timer = setInterval(scroll_right, 300); 
}

function kill() {
    clearInterval(timer)
}
...