Run jquery function between delay() function-CodePudding

after successful ajax call I have jquery open toast function:

    function successMessage() {
        $("#toast_success").show("slow").delay(3000).hide("slow");
    }

Some people might want to close that toast before 3s [ delay(3000) ]:

    $(".toast_close").on('click', function() {
        $("#toast_success").hide("slow");
    });

Unfortunately on click event do not work, message dissapears after 3seconds, and thats it. Any suggestions how to make work "$(".toast_close").on('click', function()" ?

CodePudding user response：

The issue is because the delay() call is still on the animation queue. The hide() method, when called with a time argument, will also use the animation queue. As such, the hide() is blocked until delay() ends.

To fix this, either use hide() with no argument, although this may be jarring in your UI, or call stop(true) to clear the animation queue before you call hide():

$(".toast_close").on('click', function() {
  $("#toast_success").stop(true).hide("slow");
});

CodePudding user response：

The .delay() method allows us to delay the execution of functions that follow it in the queue. SO we need to stop the animation queue. For Stoping the animation we use stop(true) or stop() method and then hide slowly.

$(".toast_close").on('click',function(){  
     $("#toast_success").stop().hide("slow");
});