Search code examples
javascriptjquery-uijquery-effects

In jQuery UI, how to prevent the "pulsate" effect for running millions of times when called consecutively?

I have the following code (similar to this):

$(Auditorium.CometService).on('bid.new', function(event, data){
    $('#feedback').text(data.msg).show('pulsate', {
        speed: 250
    });
});

The problem is that for every "bid.new" event, #feedback pulsates X times (default is 5) and sometimes there are 5 bids in 2 seconds, so it queues the animation and pulsates 25 times. I need to forget about the queue of animations. If many 'bid.new' events are fired in a second, should be animated only once (pulsate 5 times only). How can I achieve this?

Solution

  • Using the stop method.

    $(Auditorium.CometService).on('bid.new', function(event, data){
    $('#feedback').text(data.msg).stop(true).show('pulsate', {
        speed: 250
    });
});

    Update: Added the true parameter to the stop() method that makes it remove queued animations for the element (and thus, behave as requested by the question).