jquery - 使用 .delay() 与 jQuery 和 Bootstrap 的按钮转换

Question

我正在测试一些非常简单的东西。我使用 Bootstrap 创建了一个基本的登录表单，如下所示:

    <div class="form-inline form-group-sm">
    <div class="input-group">
        <label for="email" class="sr-only">Email Address :</label>
        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
        <input type="email" required id="email" placeholder="Email Address" class="form-control">
    </div>
    <div class="input-group">
        <label for="password" class="sr-only">Password :</label>
        <input type="password" required id="password" placeholder="Password" class="form-control">
    </div>
    <button id="signIn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button>
</div>

我的目标是在用户单击“登录”按钮时使用转换来更改按钮的文本以表明它正在处理，并在处理完成后将其更改回来。仅出于测试目的，我添加了以下 jQuery 代码:

    <script type="text/javascript">
    $(document).ready(function () {
        $('#signIn').on('click', function () {
            var $btn = $(this);
            $btn.button('loading');
            $btn.delay(1500);
            $btn.button('reset');
        })
    });
</script>

这两行似乎是问题所在:

            $btn.delay(1500);
            $btn.button('reset');

如果我将它们移除，那么更改按钮文本的过渡会起作用，这很好，尽管我仍然想在延迟后将其更改回其原始文本。但是添加这两行以重置按钮会破坏它。我可以使用一些帮助来理解原因，因为我在调试器控制台中没有收到任何消息。它默默地失败了。

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

你应该使用 setTimeout相反，作为 .delay()限于jQuery effects .

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

---

$(document).ready(function () {
    $('#signIn').on('click', function () {
        var $btn = $(this);
        $btn.button('loading');
        setTimeout(function(){
            $btn.button('reset');
        }, 1500);
    })
});

---

这只是您可以使用 .delay() 实现类似效果的示例

$('#signIn').on('click', function () {
  $(this).button('loading')
         .fadeTo("fast", 0.5)
         // can use .delay() here, in between two jQuery animation effects:
         .delay(1500)
         .fadeTo("fast", 1, function(){
             $(this).button('reset');
         });
});

JSFiddle