清除jQuery插件中启动的非全局超时

Question

I try to set a timeout on an element, fired with a jQuery plugin. This timeout is set again in the function depending on conditions. But, I want to clear this element's timeout before set another (if I relaunch the plug-in), or clear this manually.

<div id="aaa" style="top: 0; width: 100px; height: 100px; background-color: #ff0000;"></div>

Here's my code (now on http://jsfiddle.net/Ppvf9/ )

$(function() {

    $('#aaa').myPlugin(0);

});



(function($) {


$.fn.myPlugin = function(loops) {

    loops = loops === undefined ? 0 : loops;

    this.each(function() {

        var el = $(this),
            loop = loops,
            i = 0;

        if (loops === false) {
            clearTimeout(el.timer);
            return;
        }

        var animate = function() {
            var hPos = 0;
            hPos = (i * 10) + 'px';

            el.css('margin-top', hPos);
            if (i < 25) {
                i++;
            } else {
                if (loops === 0) {
                    i = 0;
                } else {
                    loop--;
                    if (loop === 0) {
                        return;
                    } else {
                        i = 0;
                    }
                }
            }

            el.timer = window.setTimeout(function () {
                animate();
            }, 1000/25);

        };

        clearTimeout(el.timer);

        //$('<img/>').load(function() {
            // there's more here but it's not very important
            animate();
        //});

    });
    return this;

};


})(jQuery);

If I make $('#element').myPlugin(); , it's launched. If I make it a second time, there's two timeout on it (see it by doing $('#aaa').myPlugin(0); in console). And I want to be able to clear this with $('#element').myPlugin(false); .

What am I doing wrong?

EDIT : SOLVED by setting two var to access this and $(this) here : http://jsfiddle.net/Ppvf9/2/

Answer 1

try saving the timeout handle as a property of the element. Or maintain a static lookup table that maps elements to their timeout handles.

Something like this:

el.timer = window.setTimeout(...);

I assume you need one timer per element. Not a single timer for all elements.