Question

我正试图让我的引导按钮显示＆＃34; loading ...＆＃34;同时执行一些耗时的功能（从外部源获取数据）。有趣的是，使用setTimeout的参考实现非常有效。

在我看来，只有在函数关闭后才会执行$(button).button('loading')命令，并且setTimeout通过在后台等待来解决这个问题。如何使用实际执行某些操作的代码复制setTimeout命令的结果？

这是我的HTML代码：

<button type="button" class="btn btn-warning" id="comb" data-loading-text="Loading..." autocomplete="off" onclick="comb()">Combinations</button>
<button class="btn btn-primary" id="timer" data-loading-text="Loading..." autocomplete="off" onclick="timer()">Set Timeout</button>

这里是javascript：

function combinations(str) {
    var fn = function (active, rest, a) {
        if (!active && !rest) return;
        if (!rest) {
            a.push(active);
        } else {
            fn(active + rest[0], rest.slice(1), a);
            fn(active, rest.slice(1), a);
        }
        return a;
    }
    return fn("", str, []);
}

function comb() {
    var btn = $('#comb').button('loading');
    console.log(combinations('abcdefghijklmnopqrs'));//this is a function that takes a lot of time (~5s) to execute
    btn.button('reset');
}

function timer() {
    var btn = $('#timer').button('loading');
    setTimeout(function () {
        btn.button('reset');
    }, 3000);
}

Answer 1

我找到了一个有效的解决方案。我仍然会欣赏更好的建议和/或解释正在发生的事情。

这是HTML：

<button type="button" class="btn btn-warning" id="comb" data-loading-text="Loading..." autocomplete="off" onclick="comb()">Combinations</button>

这里是工作的javascript（基本上我把我的代码包装在一个setTimeout命令中，超时很短：

function combinations(str) {
    var fn = function (active, rest, a) {
        if (!active && !rest) return;
        if (!rest) {
            a.push(active);
        } else {
            fn(active + rest[0], rest.slice(1), a);
            fn(active, rest.slice(1), a);
        }
        return a;
    }
    return fn("", str, []);
}

function comb() {
    var btn = $('#comb').button('loading');
    setTimeout(function () {
        console.log(combinations('abcdefghijklmnopqrs'));
        btn.button('reset');
    },100);
}

在我看来，我执行的代码是阻止bootstraps javascript（或jQuery）更改按钮状态直到它完成。现在，setTimeout命令为bootstraps javascript提供了在执行代码之前更改按钮状态的时间。我仍然觉得这很奇怪，并希望得到解释。

编辑：

Here is a jsfiddle demonstrating the solution

Edit2：我意识到100毫秒的超时比10毫秒更安全，因为一些较慢的设备/浏览器可能无法在10毫秒内重建页面。我相应地更新了代码/ jsfiddle。

Edit3：在the Bootstrap Github issue tracker的peterblazejevicz的帮助下，我发现了这个优雅的解决方案：

function comb() {
    var btn = $('#promise').button('loading');
    var request = $.ajax('/');
    request.done(function (data) {
        console.log(combinations('abcdefghijklmnopqrs'));
    });
    request.always(function () {
        btn.button('reset');
    });
}

Here is the updated and final jsfiddle demonstrating the solution

Bootstrap有状态按钮无法按预期工作

1 个答案: