Home>

How can I stop a function from executing when hovering over an element? Added to stop setInterval, but how to make it stop the first execution of the function when hovering over an element?

function swapImages() {
                setTimeout(function() {
                    $('.zz_a').addClass('map-show');
                    $('.t_a').addClass('map-show');
                    $('.a_a').addClass('map-show');
                }, 500);
                setTimeout(function() {
                    $('.zz_a').removeClass('map-show');
                    $('.t_a').removeClass('map-show');
                    $('.a_a').removeClass('map-show');
                }, 1000);
}
$(document).ready(function(){
            swapImages();
            intervalId= setInterval(function(){
                swapImages()},1000);
            });
        $('#super-map').hover(function () {
            clearInterval(intervalId);
        });

and now setInterval stops in my code, if the function is running, it continues to be executed, I need the function to be interrupted

Вася Хароший2022-01-14 11:02:45

and now what's wrong?

Алексей Шиманский2022-01-14 10:34:06

interrupt the execution of the swapImages function when hovering over the #super-map element

Вася Хароший2022-01-14 10:33:07

what does "the first execution of the function stopped" mean?

Алексей Шиманский2022-01-14 10:26:47
  • Answer # 1
    const box= document.querySelector('.box');
    let freeze= false;
    function myFunction() {
      if (freeze) return;
      console.log('do something');
    }
    box.addEventListener('mouseenter', ()=> {
      freeze= true;
    });
    box.addEventListener('mouseleave', ()=> {
      freeze= false;
    });
    setInterval(()=> {
      myFunction();
    }, 1000);
    .box {
      width: 100px
      height: 100px;
      line-height: 100px
      text-align: center;
      background-color: rgb(0, 213, 255);
    }
    <div class="box">freeze</div>

    UPDATE

    let freeze= false;
    function swapImages() {
      console.log('swapImages:do something #0');
      setTimeout(function() {
        if (freeze) return;
        console.log('swapImage.setTimeout:do something #1');
        $('.zz_a').addClass('map-show');
        $('.t_a').addClass('map-show');
        $('.a_a').addClass('map-show');
      }, 500);
      setTimeout(function() {
        if (freeze) return;
        console.log('swapImage.setTimeout:do something #2');
        $('.zz_a').removeClass('map-show');
        $('.t_a').removeClass('map-show');
        $('.a_a').removeClass('map-show');
      }, 1000);
    }
    $(document).ready(function() {
      swapImages();
      intervalId= setInterval(function() {
          swapImages()
      }, 1000);
      $('.box').hover(function() {
        freeze= true;
        clearInterval(intervalId);
      });
    });
    .box {
      width: 100px
      height: 100px;
      line-height: 100px
      text-align: center;
      background-color: rgb(0, 213, 255);
    }
    <div class="box">freeze</div>

    @Aleksey Shimansky, I completely agree with you.

    meine2022-01-14 11:19:40

    @meine it seems to me that it would be more correct to interrupt all timeouts, and not make them run all the time, but doing nothing

    Алексей Шиманский2022-01-14 11:17:50

    @VasyaKharoshiy, updated.

    meine2022-01-14 11:16:07

    @VasyaKharoshiy, your function execution is already interrupted.

    meine2022-01-14 11:07:31

    it is possible on an example of my code? now setInterval stops in my code, if the function is running, it continues to be executed, I need the function to be interrupted

    Вася Хароший2022-01-14 11:03:07