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

Question

我尝试在一个元素上设置一个超时，使用 jQuery 插件触发。根据条件在函数中再次设置此超时。但是，我想在设置另一个之前清除这个元素的超时（如果我重新启动插件），或者手动清除它。

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

这是我的代码（现在在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);

如果我 make $('#element').myPlugin();，它就会启动。如果我再做一次，就会有两次超时（$('#aaa').myPlugin(0); 在控制台中查看）。我希望能够用$('#element').myPlugin(false);.

我究竟做错了什么？

编辑：通过设置两个 var 来访问解决this： http $(this): //jsfiddle.net/Ppvf9/2/

Answer 1

尝试将超时句柄保存为元素的属性。或者维护一个静态查找表，将元素映射到它们的超时句柄。

像这样的东西：

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

我假设每个元素需要一个计时器。不是所有元素的单个计时器。