Question

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

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

$(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);

如果我制作$('#element').myPlugin();，它就会启动。如果我再次进行，则会有两次超时（通过在控制台中执行$('#aaa').myPlugin(0);来查看）。我希望能够使用$('#element').myPlugin(false);清除此内容。

我做错了什么？

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

Answer 1

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

这样的事情：


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

我假设每个元素需要一个计时器。所有元素都没有一个计时器。

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

1 个答案: