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

Question

我试图让我的 Bootstrap 按钮显示“正在加载...”，同时执行一些耗时的功能(从外部源获取数据)。有趣的是，使用 setTimeout 的引用实现工作得很好。

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

Jsfiddle demonstrating my problem.

这是我的 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

我找到了一个可行的解决方案，它有点像 hack。我仍然会感谢更好的建议和/或解释发生了什么。

这是 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);
}

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

编辑:

Here is a jsfiddle demonstrating the solution

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

Edit3:在 peterblazejevicz 的帮助下 the Bootstrap Github issue tracker ，我找到了这个使用 promise 的优雅解决方案:

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