Question

我有一个面板，在13秒后自动滑动。我用jquery.delay（）做了这个。如果我想通过单击事件手动滑动面板，则会出现此问题。似乎click事件正在等待延迟结束才能生效..

我可以用什么代替延迟（）？

我的代码：

延迟部分：

$('#menu').delay(13000).hide("slide", { direction: "right" }, 400, function () {
            if ($('#menu').is(':hidden')) {
                $('#trigger').removeClass("triggerdroiteExtended");
                $('#trigger').addClass("triggerdroiteCollapsed");
                $.cookie('rightfold', 'collapsed', { path: '/' });
            }
        });

Click事件部分：

  $('#triggerdroite').click(function () { foo
});

Answer 1

这是一个你最好使用setTimeout和clearTimeout的地方。来自delay docs：

.delay()方法最适合延迟排队的jQuery效果。因为它有限 - 它没有提供取消延迟的方法 - .delay()不能替代JavaScript的原生setTimeout功能，可能是更适合某些用例。

（我的重点。）

所以在这种情况下：

(function() {
    var slideTimer = 0;
    slideTimer = setTimeout(function() {
        $('#menu').hide("slide", { direction: "right" }, 400, function () {
                if ($('#menu').is(':hidden')) {
                    $('#trigger').removeClass("triggerdroiteExtended");
                    $('#trigger').addClass("triggerdroiteCollapsed");
                    $.cookie('rightfold', 'collapsed', { path: '/' });
                }
            });
    }, 13000);
    $('#triggerdroite').click(function() {
        if (slideTimer) {
            clearTimeout(slideTimer);
            slideTimer = 0;
        }

        // ...
    });
})();

（外部匿名函数只是一个占位符，我假设你的代码已经在某个函数中，以防止创建全局变量。）

注意我使用0作为“无计时器运行”值。 0不是setTimeout的有效返回值，因此它是一个有用的标记。

当然，我可以使用data将其存储在#menu元素本身上，而不是将其存储在变量中。

Answer 2

我知道这个问题已经有8年的历史了（在撰写此答案时），但是我想我建议一种更简单的方法，我什至认为这是解决此类问题的预期方法。我不知道在编写接受的答案时该功能是否已经可用，所以我写这个答案只是为了以防万一。

您可以使用方法clearQueue()清除仍将要调用的每个函数（诸如delay，fadeIn，fadeOut等函数。 ..

它甚至还可以选择传递一个参数，说明应该从队列中删除哪些功能。

我在一个项目中使用了这种精确的方法。好东西是：

您不必担心全局常数
您可以继续使用jQuery函数编写必要的代码。

我的项目示例：

function add_notifications(type, ...messages)
{
    var div_notification =
        $('<div class="notification ' + type + '"></div>');

    // doing stuff not important to visualize use of clearQueue() ...

    div_notification.on('click', function() {
        $(this).clearQueue();
        $(this).fadeOut(500, function() {
            $(this).remove();
        })
    });

    div_notification.hide().fadeIn(500, function() {
        $(this).delay(10000).fadeOut(500, function() {
            $(this).remove();
        });
    });

    div_notification.appendTo('div#notifications');
}

删除click事件的delay（）

2 个答案: