Question

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

all

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

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

这两行似乎是问题所在：

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

如果我把它们拿出来，那么改变按钮文本的过渡就可以了，这很好，虽然我仍想在延迟后将其改回原文。但是添加这两行来重置按钮就会破坏它。我可以使用一些帮助来理解原因，因为我在调试器控制台中没有得到任何消息。它无声地失败。

任何帮助将不胜感激。谢谢！

Answer 1

您应该使用setTimeout，因为.delay()仅限于jQuery effects。

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

$(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

使用带有jQuery和Bootstrap的.delay（）转换按钮

1 个答案: