Question

自定义CSS类.btn-loading禁用该按钮并将其文本设置为加载状态：

$(document).on('click', '.btn-loading', function() {
    var btn = $(this);
    btn.button('loading');

    // Fail-safe for buttons that get stuck in the loading state sometimes.
    setTimeout(function() {
        Rollbar.error("Button stuck");
        btn.button('reset');
    }, 10000);
});

// Be sure to remove any loading state on page refresh
$(document).on('ready page:load', function() {
    $('.btn-loading').button('reset');
});

示例按钮

button type="submit" class="btn btn-primary btn-loading" data-loading-text="Processing..." Continue

按下按钮时，文字会更改为“处理...”＆＃39;并且该按钮被禁用以防止多次提交。

但是，有时在开发和生产中，按钮会陷入加载状态，并且由于某种原因不会导致提交和/或呈现新页面。 setTimeout每天在生产服务器上多次触发。我们一直很难在开发过程中产生问题......它偶尔会随机发生。

Rollbar的统计信息显示，它不是特定于浏览器的，也不是单个按钮+导致它的操作。因此原因也不是服务器响应缓慢。

知道可能导致这种情况的原因以及如何解决这个问题？

Answer 1

我在一段时间后遇到了类似的问题并用不同的方法解决了同样的问题。尝试按照以下步骤解决您的问题。

HTML：

将您的按钮类型从“提交”更改为“按钮”。这将使您完全控制执行脚本。

<button type="button" class="btn btn-default" id=”SubmitButton”>Submit</button>

JQUERY：

开启按钮单击，您需要禁用该按钮。这将立即阻止用户再次单击。然后，您可以将按钮文本更改为“正在处理”。下面的脚本将指导您实现它。

$(function () {

    $('#SubmitButton').click(function (e) {
        e.preventDefault();

        //Disable Button to avoid multiple clicks
        $(this).attr("disabled", true);

       // Change the button text to “Processing”
       $(this).text(‘Processing’);

       // Write Your Validation Scripts
       // If Validation Fails - $(this).text(‘Submit’); $(this).attr("disabled", '');
       // Else Submit Form

       //Submit the Form
       $("#targetForm").submit();

    })
})

Answer 2

要防止多次提交，您还可以使用$ .one（）函数。并添加剩余的逻辑。

Answer 3

按下按钮时，文本将更改为“正在处理...”和按钮被禁用，阻止多次提交。

- 请注意，您的代码段中没有禁用该按钮的部分。

// Fail-safe for buttons that get stuck in the loading state sometimes.
setTimeout(function() {
    // if(stuck){
    Rollbar.error("Button stuck");
    btn.button('reset');
    // } // end-if
}, 10000);

- 看起来您的后备将永远执行。按钮卡住时不应该执行？

setTimeout每天在生产中多次触发服务器

- 因为您的按钮永远不会被禁用，并且因为没有条件限制它被点击时触发。

此外，没有像button()这样的jQuery方法。看起来你正在使用jQueryUI，你也应该提到它。但对我来说，jQueryUI + Bootstrap似乎是一个奇怪的组合。

Bootstrap button.js和Turbolinks问题

3 个答案: