Question

我用谷歌搜索并遇到了许多类似的问题，人们试图在jQuery插件中设置setTime，但是我正在努力解决问题，这不是一个懒惰的帖子。

我正在尝试延迟调用animate隐藏某些内容，例如，如果用户将鼠标悬停在某个区域上，则会有更多内容进入视图并隐藏原始内容。然后，当用户在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);

Answer 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);

Answer 2

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

尝试重写该块：

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

这样，你传递一个回调函数，然后调用delayedDeceptionAnimate函数！

在jQuery插件中忽略setTimeout时间间隔

2 个答案: