jQuery插件中忽略的setTimeout时间间隔答案

【问题标题】：setTimeout time interval ignored in jQuery pluginjQuery插件中忽略的setTimeout时间间隔
【发布时间】：2013-02-07 00:52:44
【问题描述】：

我在谷歌上搜索并遇到了许多类似的问题，人们试图在 jQuery 插件中设置超时，但我正在努力寻找答案，这不是一个懒惰的帖子。

我试图在调用动画以隐藏某些内容时实现延迟，例如，如果用户将鼠标悬停在某个区域上，则会有更多内容进入视图并隐藏原始内容。然后，当用户在 2 秒后将鼠标移开时，会返回原始内容。

尽管忽略了超时，但动画按预期工作。这是我无法理解的！

我们将一如既往地对代码提供任何帮助！

这是简化的代码，专注于动画，但我保留了插件结构：-

;(function($){
$.fn.extend({         
    pluginName: function(options) {
        // - Settings list and the default values           
        var defaults = {
            width: this.css('width'),
        };

        var options = $.extend({}, defaults, options);   

        return this.each(function() {

        // --  Globals
            var o = options;    
            var timeoutID;

        function deceptionAnimate(display) {
            if(display == 1) {
                obj.clearQueue().animate({
                                        'top': 0,
                                        'left': -o.width 
                                        }, o.interval, o.easing);               
            } else if(display == 0) {
                obj.clearQueue().animate({
                                        'top': 0,
                                        'left': 0
                                        }, o.interval, o.easing)                
            } 
        }

        function delaydeceptionAnimate () {
            timeoutID = window.setTimeout(deceptionAnimate(0), 2000);
        }

        // ---- Initiate
        function init() {   
                        // ----- Animate

                        $(document).on(o.eventTrigger, wrapperID, function() {
                            deceptionAnimate(1);
                        });
                        $(document).on('mouseout', wrapperID, function() {
                            delaydeceptionAnimate(0);
                        });     
        }       
        // Call
        init();

        });
    }
});
})(jQuery);

【问题讨论】：

标签： javascript jquery jquery-plugins timeout

【解决方案1】：

window.setTimeout(deceptionAnimate(0), 2000);

您正在调用 deceptionAnimate 参数为0，然后将其返回值(null) 作为要调用的函数传递给setTimeout。

在这种特殊情况下，您可以像这样重写deceptionAnimte：

function deceptionAnimate(display) {
    if( display) { /* code to show box */ }
    else { /* code to hide box */ }
}

然后使用这个：

window.setTimeout(deceptionAnimate, 2000);

但在更一般的情况下，要将参数传递给要延迟的函数，请使用匿名函数：

window.setTimeout(function() {deceptionAnimate(0);}, 2000);

【讨论】：

如果不清楚，deceptionAnimate(0) 是一个函数 call; deceptionAnimate 是一个函数reference。你想给 setTimeout 一个函数，以便在计时器计时结束时调用，所以你应该给它一个函数引用。
非常感谢，感谢您对参考资料的解释，这确实帮助我理解了这里的问题。我决定将其作为答案，因为我正在寻找一种解决方案，可以让我修改 deceptionAnimate 函数以处理延迟。
@kolink，我也有同样的问题，请看stackoverflow.com/questions/19178170/…

【解决方案2】：

您要小心编写超时函数调用的方式。在这里，您实际上是在调用 delayDeceptionAnimate 而不是将其作为函数属性传递给 setTimeout 函数。

尝试像这样重写该块：

function delaydeceptionAnimate () {
    timeoutID = window.setTimeout(function() {
        deceptionAnimate(0);
        }, 2000);
}

这样，您将传递一个回调函数，然后调用 delayDeceptionAnimate 函数！

【讨论】：