Question

处理自定义购物车的一小段代码。我想更改按钮以显示成功消息2秒，然后将按钮恢复为原始HTML。

HTML ...

<button id="42" class="btn btn-primary btn-block" type="button" onclick="added_to_order('42')">1st Semester<span class="glyphicon glyphicon-chevron-right float-right"></span></button>

...的Javascript

function added_to_order(id){
    var old_html = $('#' + id + '').html();

    $('#' + id + '').html('<span class="glyphicon glyphicon-ok-sign"></span> Added to your order!');
    $('#' + id + '').removeClass('btn-primary').addClass('btn-success').delay(2000).html(old_html);
}

一切都很好，除非我在使用旧HTML更新按钮之前没有得到2秒的延迟。

有什么想法吗？

Answer 1

在这种情况下，最好使用setTimeout函数。

function added_to_order(id){
    var old_html = $('#' + id + '').html();

    $('#' + id + '').html('<span class="glyphicon glyphicon-ok-sign"></span> Added to your order!');

    $('#' + id + '').removeClass('btn-primary').addClass('btn-success');

    setTimeout(function() {

        $('#' + id + '').html(old_html);

    }, 2000);
}

Answer 2

我不认为任何旧函数都有资格成为jQuery特效队列的有效成员。我已经将代码包装在一些queue函数调用中。请查看该页面上的其他示例以获取更多想法。

function added_to_order(el){
    var old_html = $(el).html();

    $(el).html('<span class="glyphicon glyphicon-ok-sign"></span> Added to your order!');
    $(el)
      .queue(function () {
        $(el).removeClass('btn-primary').addClass('btn-success').dequeue();
      })
      .delay(2000)
      .queue(function () {
        $(el).html(old_html).dequeue();
      });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary btn-block" type="button" onclick="added_to_order(this)">1st Semester<span class="glyphicon glyphicon-chevron-right float-right"></span></button>

jQuery delay（）没有按预期工作

2 个答案: