使用 stop() 加速 Jquery delay()答案

【问题标题】：Expedite Jquery delay() with stop()使用 stop() 加速 Jquery delay()
【发布时间】：2014-07-14 21:15:07
【问题描述】：

这是我的问题：

我有三个按钮：

<button>Button A</button>
<button>Button B</button>
<button>Button C</button>

每个按钮触发一些AJAX拉取数据，并根据响应做出反应。

如果没有返回数据，则会显示一个带有延迟淡出的错误警报，如下所示：

if ( no_data )
{
    $error.show().delay(6000).fadeoutOut("slow");
}
else 
{
    // we have data, do some stuff
}

因此，如果 Button B 没有返回数据并显示警报，然后我快速单击确实有数据的 Button C，则错误警报会一直存在，直到延迟完成，这不是故意的。

我尝试在 else 块中添加隐藏功能：

if ( no_data )
{
    $error.show().delay(6000).fadeOut("slow");
}
else 
{
    $error.hide(); // we don't want the alert to keep showing

    // we have data, do some stuff
}

太好了，所以现在成功的查询会删除显示的警报。但是，如果（如上所述）我单击按钮 B，出现错误（触发警报），然后单击按钮 C 并删除警报......然后我再次（快速）单击按钮 B，之前的延迟是仍在动画队列中，几乎立即删除警报。

有没有这样的方法：

if ( no_data )
{
    $error.show().delay(6000).fadeOut("slow");
}
else 
{
    // kill the previous fadeOut, then...

    $error.hide();

    // do other stuff
}

我已经尝试添加停止功能：

$error.stop(true, true).hide();

但它似乎仍然不起作用。我认为这是因为由于延迟，队列中没有动画，所以 stop 函数实际上从未删除任何内容。

我做错了什么？

【问题讨论】：

在错误清除或显示新错误之前禁用按钮怎么样？
我不希望用户支付等待罚款。

标签： jquery

【解决方案1】：

setTimeout() 和 clearTimeout() 可以解决这个问题：

    var $a = $('#btn-a');
    var $b = $('#btn-b');
    var $c = $('#btn-c');
    var $x = $('#alert');
    var timerHandle;

    $a.on('click', function (e) {
        $x.show();
        timerHandle = setTimeout(function () {
            $x.fadeOut("slow");;
        }, 6000);
    });

    $b.on('click', function (e) {
        $x.show();
        timerHandle = setTimeout(function () {
            $x.fadeOut("slow");;
        }, 6000);
    });

    $c.on('click', function (e) {
        $x.hide();
        clearTimeout(timerHandle);
    });

【讨论】：

对于其他阅读本文的人，请注意队列清除和stop() 不适用于delay()。起初不知道确切的问题，这解释了为什么我找不到关于它的任何问题:)

【解决方案2】：

您是否尝试过使用 dequeue() 来打破 delay() 函数？

你可以试试这样的：

 if ( no_data ){
   $error.show().delay(6000).fadeOut("slow");
 }else{
   // kill the previous fadeOut, then...

   $error.dequeue();

   // do other stuff
 }

在您的代码中，它看起来像这样：

 $c.on('click', function(e) {
   $x.hide();
   $x.dequeue();
 });

也就是说，我相信拥有一个状态机可能会更好，您可以在其中跟踪正在显示的错误的状态，并且仅在错误淡出事件完成时才启用按钮 A、B 和 C。您可以在没有显示错误时启用按钮，但是当检测到错误时，您可以使用 setTimeout 函数禁用按钮 6000 毫秒。

【讨论】：