Question

I have a panel who slide automatically after 13 seconds. I made this with jquery.delay().
The problem appears if I want to manually slide the panel with a click event. It appears that the click event is waiting the end of the delay to effect..

What can I use in place of delay()?

My code :

The delay part:

$('#menu').delay(13000).hide("slide", { direction: "right" }, 400, function () {
            if ($('#menu').is(':hidden')) {
                $('#trigger').removeClass("triggerdroiteExtended");
                $('#trigger').addClass("triggerdroiteCollapsed");
                $.cookie('rightfold', 'collapsed', { path: '/' });
            }
        });

The Click event part:

  $('#triggerdroite').click(function () { foo
});

Answer 1

This is a place you’re probably better off using setTimeout and clearTimeout. From the delay docs:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited — it doesn’t, for example, offer a way to cancel the delay — .delay() is not a replacement for JavaScript’s native setTimeout function, which may be more appropriate for certain use cases.

(My emphasis.)

So in this case:

(function() {
    var slideTimer = 0;
    slideTimer = setTimeout(function() {
        $('#menu').hide("slide", { direction: "right" }, 400, function () {
                if ($('#menu').is(':hidden')) {
                    $('#trigger').removeClass("triggerdroiteExtended");
                    $('#trigger').addClass("triggerdroiteCollapsed");
                    $.cookie('rightfold', 'collapsed', { path: '/' });
                }
            });
    }, 13000);
    $('#triggerdroite').click(function() {
        if (slideTimer) {
            clearTimeout(slideTimer);
            slideTimer = 0;
        }

        // ...
    });
})();

(The outer anonymous function is just a placeholder, I assume your code is already inside some function to prevent creating globals.)

Note I’m using 0 as a “no timer running” value. 0 is not a valid return value from setTimeout, so it’s a useful flag.

Of course, rather than storing this in a variable as I have above, you could always store it on the #menu element itself using data.