Execute function after a delay or kill it in jquery

Question

I use a function to load a page with jQuery but only after a certain delay after hovering over a li. For that I use setTimeout on the mouseover and try to kill it on the mouseleave if the mouse hovered for less than 500ms over the li. However, the jQuery.ajax still launches, so basically, if I hover over all lis, that will launch plenty of xhr even if I stay only 1ms on the li.

var timer2;
var delay2 = 500;

$('body').on('mouseover','li',function(){

    timer2 = setTimeout(function() {

        var url="res.php";
            jQuery.ajax(
            {
                type: 'POST',
                url:url,
                success: function(data){

                    $('#res').html(data);

                }
            });


    }, delay2);

});
$('body').on('mouseleave', 'li', function() {
    clearTimeout(timer2);
});

Try as I may, it's still unclear what your asking or need help with. — Adam, Jan 09 '18 at 16:24
@Adam OP wants to fire an ajax call if the mouse stays over an LI for 500ms. Seems the timer is not being cleared if the mouse leaves that element before the timeout fires. — James Thorpe, Jan 09 '18 at 16:26
@john - sounds like you have multiple LIs? Is that right? If thats the case, all your timer IDs are overwriting each other as you move around - only the last one will be cancelled. — James Thorpe, Jan 09 '18 at 16:27
For a start I'd use classes, scanning the body each time is expensive (depending on how large it is), then, increase the 500ms to something bigger, then put console logs in the mouseenter and leave to make sure they're are behaving as you wish — StudioTime, Jan 09 '18 at 16:28
@JamesThorpe that's what I thought too, but that should be prevented because `mouseleave` gets called. Unless there's some race condition between the `mouseleave` for one `li` and the `mouseover` for the other. — Federico klez Culloca, Jan 09 '18 at 16:30
@FedericoklezCulloca Depends on the nesting - might have multiple nested lists etc — James Thorpe, Jan 09 '18 at 16:30
It works fine, there's obviously something else going on - here it is with simple console log and 2 second timer - same would apply with ajax call - https://jsfiddle.net/au2y7wt8/1/ — StudioTime, Jan 09 '18 at 16:44

Jeremy Thille · Answer 1 · 2018-01-09T16:46:25.600

3

Just clear your timeout before setting it again :

var timer2 = null;

$('body').on('mouseover','li',function(){
    clearTimeout(timer2);
    timer2 = setTimeout(function(){ .....

You need to initialize the timeout to null, otherwise you'll get an error can't clear timeout of undefined.

Also, try this to trigger the mouseleave :

$('body').on('mouseover','li',function(){
     // ...
     $(this).off("mouseleave").on("mouseleave", () => clearTimeout(timer2))
});

Edit : Working snippet

var timer2 = null;
var delay2 = 2000;

$('body').on('mouseover', 'li', function() {
  clearTimeout(timer2);
  console.log("Setting timeout...")

  timer2 = setTimeout(() => console.log("Ajax call!"), delay2);

  $(this).off("mouseleave").on('mouseleave', () => {
    console.log("Clearing timeout.")
    clearTimeout(timer2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li>Hover over me</li>
<li>Over me too</li>

edited Jan 09 '18 at 16:46

answered Jan 09 '18 at 16:29

Jeremy Thille

26,047
12
43
63

If there's only one `
` how will this help? The problem sounds like the `mouseleave` is not doing what it should

StudioTime

Jan 09 '18 at 16:31

@DarrenSweeney why do you think there's only one `li`? Relevant part of the question: "if I hover over all `li`s" – Federico klez Culloca Jan 09 '18 at 16:32

Hmmm... Make sense, I think I misunderstood the question – Jeremy Thille Jan 09 '18 at 16:33

I think your issue is more based on the HTML markup than this code. You probably want mouseenter, not mouseover. https://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover – epascarello Jan 09 '18 at 16:35

@DarrenSweeney Added a suggestion about the `mouseleave`. – Jeremy Thille Jan 09 '18 at 16:36

Testing this still trigger the timer occasionally in jsFiddle and I'm inclined to thing it is the binding having to traverse through the DOM which easily can impact a 500millisecond timer. Bindings might be better of to bind to a closer static element than `body` – Nope Jan 09 '18 at 16:38

...not anymore :) – Jeremy Thille Jan 09 '18 at 16:38

@FedericoklezCulloca Ok, I'll rephrase - if the OP hovers over only one `

` how will this help?

– StudioTime Jan 09 '18 at 16:39

epascarello · Accepted Answer · 2018-01-09T16:56:02.150

The problem here is simple. You use mouseover, mouseover can fire multiple setTimeouts while you are over the element.

$("div")
  .on("mouseover", function(){ console.log("mouseover"); })
  .on("mouseenter", function(){ console.log("mouseenter"); });

span { background-color: red;
font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>Move mouse here</span> to <span>here</span> to <span>here</span></div>

So each time you move over elements inside of the parent, it fires another mouseover. So if that is the case you will create multiple events. So if you see multiple ajax calls for an li, that may be a reason why.

So change it to mouseenter, next cancel the event inside of enter OR track the events via the li itself and not a global.

$("ul")
  .on("mouseenter", "li" function(){ 
    $(this).data("timer", setTimeout( function () {});
  }).on("mouseleave", "li" function(){ 
    var id = $(this).data("timer");
    if (id) window.clearTimeout(id);
  })

And if you really want to be sure, clear the timeout on mouseenter....

Vignesh Raja · Answer 3 · 2018-01-09T16:42:41.303

Give an id to that specific li and use as below. This works. Check console Networks tab for verification.

var timer2;
var delay2 = 500;
var ajax;
$('body').on('mouseover','li#one',function(){
    console.log("Mouse over");
    clearTimeout(timer2);
    timer2 = setTimeout(function() {
        if(ajax) {ajax.abort();}
        var url="res.php";
        ajax = $.ajax(
        {
            type: 'POST',
            url:url,
            async:true,
            success: function(data){
                $('#res').html(data);
            }
        });
    }, delay2);

});
$('body').on('mouseleave', 'li#one', function() {
    console.log("Mouse left");
    clearTimeout(timer2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="one">One</li>
<li>Two</li>

He needed only on hovering a `li`. Even if he wants to include multiple `li` he can do it by adding their `ids` while binding the listeners. — Vignesh Raja, Jan 09 '18 at 16:47

wwju · Answer 4 · 2018-01-09T17:39:06.880

There are few ways to solve this problem

abort your request after mouseleave
use variable inside callback to tell it "don't do it"

`abort` your request

// ...
var request;

$('body').on('mouseover','li',function(){
    // ... I omited `setTimeout` to simplify the explanation
    // you have to make this variable to be able to control your requests
    var xhr = new window.XMLHttpRequest();
    // here we save our request
    request = jQuery.ajax(
            {
                // ...
                // note this change here, it is required for jquery 3.0 and more
                xhr : function(){ return xor; }
            });
    // ...

});
$('body').on('mouseleave', 'li', function() {
    // ...
    // now we can `abort` it any time user mouse leaves
    request.abort();
});

Question about abort on SO

use variable

// ...
var leaved = false

$('body').on('mouseover','li',function(){
    // ... I omited `setTimeout` to simplify the explanation
    leaved = false
    jQuery.ajax(
            {
                // ...
                success: function(data){
                    if (leaved) return;
                    $('#res').html(data);

                }
            });
    // ...

});
$('body').on('mouseleave', 'li', function() {
    // ...
    leaved = true
});

I didn't write here code which is unecessary to explain the solution, @Nope — wwju, Jan 09 '18 at 17:38
You don't need to explain anything, I'm only pointing out that OP wanted a 500ms delay which you omitted from the solution but is needed and is part of the problem. — Nope, Jan 10 '18 at 09:29

Execute function after a delay or kill it in jquery

4 Answers4

abort your request

use variable

`abort` your request