Javascript,原型对象,jQuery和计时器

时间:2012-02-21 17:36:11

标签: javascript jquery oop

我以为我已经通过类型修正在周五解决了这个问题,但我没有:(

我一直在努力寻找解决这个问题的方法(如果有的话)。也许我不是在寻找合适的东西,但我找不到解决方案......

设置:

$.myPlugin = function(element, options){
    this.myElement = $(element);
    this.myElement.data('rotator', '');
    this.myElement.data('settings', $.extend({}, $.myPlugin.defaultOptions, options));
    this.mainFunction(this.myElement);
};

$.myPlugin.defaultOptions = { // yadda yadda };


$.myPlugin.prototype = {
    mainFunction : function(myself){
        // establish initial parameters
        var TEST = Math.rand();

        // do a bunch of stuff
        $(myButton).live('click', function(){               
            alert(TEST) //<---FOR TESTING PURPOSES

            // do other things
            myself.data('rotator', setTimeout(function(){               
                // click button after x period
                myButton.click();   
            }, x ));    
        });
    },

    destroy : function(){
        myself = $(this);
        myself.myElement.removeData('settings');
        clearTimeout(myself.data('rotator'));
    }
};

$.fn.myPlugin = function(options) { 
    // parse options
    this.each(function(){
        var instance = $(this).data('myPlugin');

        // blah blah blah ... on create
        $(this).data('myPlugin', new $.myPlugin(this, args));

        // blah blah blah ... on destroy
        instance['destroy'].apply(this);
        $(this).data('ddGallery', null);
    };
    return this;
};

所需功能:

在我的逻辑中,我想在元素上创建一个对象。然后,插件将元素的内容存储在变量中,并在其中放入新内容。有一个自动定时事件,在点击时调用,带有.live()点击监听器; click事件重置计时器,导致循环(而不是使用setInterval)。在销毁时,我替换存储的原始html内容,想要杀死对象。到目前为止,这一切都有效。我希望能够在元素上重新创建对象(可能在不同的设置中传递)。

这就是出错的地方:

当我在销毁后在同一元素上重新创建对象时,原始计时器继续运行。 我无法摆脱stinkin'计时器,我即将撕掉我的头发!

为了测试,我在初始化时设置了一个随机数,并在点击时提醒该号码。最初,我可能会收到警告,例如“0.1234”。然后我可以销毁对象(我只是在表单按钮上使用监听器来创建和销毁)。该元素将返回其初始状态,并愉快地无限期地坐下。但是,只要我再次在元素上运行插件,原始的“0.12345”警报会立即弹出,没有延迟(并且所有动画都会触发)。接着是另一个 new 弹出窗口,例如“0.5678”。现在两个计时器继续射击该元素,造成严重破坏。

我错过了什么?

2 个答案:

答案 0 :(得分:3)

您没有解除destroy方法中按钮上的原始点击事件的绑定。您需要添加如下调用:

   myself.die('click');
在你的destroy方法中

。您在未来点击时看到原始随机数警报的原因是因为您第一次将闭包绑定到click事件。你杀掉了计时器,但没有取消绑定点击处理程序。

下次单击该按钮时,您将绑定一个新的单击处理程序;现在你有两个点击处理程序,每个处理程序都是一个闭包,它记住了创建时生成的随机数。现在,单个计时器会反复点击该元素,每次点击它都会触发两个点击处理程序。

答案 1 :(得分:0)

尝试不使用jQuery的数据函数,我感觉在代码中创建新的jQuery对象会损害您引用计时器的能力。尝试

 this.rotator = setTimeout(...

VS

 $(this).data('rotator', setTimeout(...

明确的看起来像这样:

clearTimeout(this.rotator);