Question

这里有一个问题：

我有三个按钮：

<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
}

因此，如果按钮B 没有返回任何数据并显示警告，我会快速点击确实有数据的按钮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函数实际上从未删除任何内容。

我做错了什么？

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

Answer 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函数禁用6000ms时间的按钮。

用stop（）加速Jquery延迟（）

2 个答案: