javascript 时间事件问题 (setTimeout/clearTimeout)答案

【问题标题】：javascript time event issue (setTimeout/clearTimeout)javascript 时间事件问题 (setTimeout/clearTimeout)
【发布时间】：2012-10-16 19:30:07
【问题描述】：

我一直无法处理时间事件。有人可以解释为什么A不起作用而B起作用吗？唯一的区别是在 A 中我将事件绑定放在了一个函数中。不用担心函数关闭，它与问题无关。测试A的时候没有js错误但是定时器没有清零。

A->

Test.Navigation = (function() {

    var openTimer = null;
    var closeTimer = null;

    var addListeners = function() {
        $('.hover_container').on('mousemove', function(e) {

            clearTimeout(closeTimer);

        });

        $('.hover_container').on('mouseleave', function(e) {

            // set the close timer
            var container = this; 
            closeTimer = setTimeout(function() {
                //has the mouse paused
                close(container);
            }, 750);
        });

    };

    return {
        init : function() {
            addListeners();
        }
    };

})();

B->

Test.Navigation = (function() {

    var openTimer = null;
    var closeTimer = null;

    $('.hover_container').on('mousemove', function(e) {

        clearTimeout(closeTimer);

    });

    $('.hover_container').on('mouseleave', function(e) {

        // set the close timer
        var container = this; 
        closeTimer = setTimeout(function() {
            //has the mouse paused
            close(container);
        }, 750);
    });


    var addListeners = function() {
        // nothing here
    };

    return {
        init : function() {
            addListeners();
        }
    };

})();

编辑：请忽略容器部分，它与问题无关，它只是我没有取出的完整代码的一部分

【问题讨论】：

对单个计时实例使用setTimeout。使用setInterval 进行持久计时。
在容器的直接作用域中声明var container = this;，而不是在另一个函数中。在 A 中，容器不是你需要的。
@dystroy 容器是我需要的，这不是问题所在，如果清除计时器工作，则关闭功能不会触发

标签： javascript jquery timer settimeout

【解决方案1】：

在调用 init 的对象存在之前绑定 A。因为您返回了一个新对象。如果您正在使用，则会创建 2 个对象。 1 与 vars en 绑定。和 1 与回报。

B 正在工作，因为您创建了一个函数，其中元素被初始化并使用正确的范围。 A 不起作用，因为绑定在错误的范围内，因为您创建了 2 个对象：

new Test.Navigation(); // Create 1 object

// Create second object.
return {
    init : function() {
        addListeners();
    }
};

你最好得到这样的结构，然后它应该也可以工作：

Test.Navigation = (function() {
    // Private vars. Use underscore to make it easy for yourself so they are private.
    var _openTimer = null,
        _closeTimer = null;

    $('.hover_container').on('mousemove', function(e) {
        clearTimeout(_closeTimer );
    });

    $('.hover_container').on('mouseleave', function(e) {

        // set the close timer, 
        //    use $.proxy so you don't need to create a exta var for the container.
        _closeTimer = setTimeout(
                $.proxy(function() {
                    //has the mouse paused
                    close(this);
                }, this)
            , 750);

    });


    this.addListeners = function() {
        // nothing here
    };

    this.init = function() {
        this.addListeners();
    }

    // Always call the init?
    this.init();

    return this; // Return the new object Test.Navigation
})();

并像使用它

var nav = new Test.Navigation();
nav.init();

您也可以看到，我稍微升级了您的代码。使用 $.proxy, _ 用于私有变量。

【讨论】：

感谢您专注于提出的问题，解释很好理解

【解决方案2】：

您对this 的使用属于第一种方法的错误范围。

试试

var openTimer = null;
var closeTimer = null;
var self = this;

后来

var container = self;

在您的代码中，例如 A，

$('.hover_container').on('mouseleave', function(e) {
 // set the close timer
 var container = this;

this 实际上是指当前的$('.hover_container') 元素。

此外，由于setTimeout 会在之前的setTimeout 完成之前等待重新开始，因此您可能会出现差异。您可能想要切换到setInterval，因为无论之前的回调是否完成，它都会在每个设置的时间间隔发出回调。

【讨论】：

我明白你所说的间隔的意思，但是容器正是我想要使用的，因为我想关闭它，无论如何，如果正确触发了明确的平局，关闭功能甚至不会触发。另外，块 A 和 B 中的容器是相同的

【解决方案3】：

我的猜测是，在调用代码中，您有一个语句new Test.Navigation()，对于 B，addListeners 在 new Test.Navigation() 时被调用。在 A 中，您返回一个调用 init 函数的对象 ref。你能验证是否调用了 init() 吗？

即在 A 中，必须在添加处理程序之前调用 init()。在 B 中，每次实例化 Test.Navigation 时都会添加处理程序 --- 根据调用代码，如果您打算一次实例化多个 Test.Navigation()，这可能会很糟糕。

【讨论】：