javascript - 如何将加载图标添加到仅处理 javascript 代码的页面？

Question

当我执行 ajax 请求时，我一直使用 Ajax 加载图标。

我想知道是否有可能只用普通的 javascript 代码来完成同样的事情。例如：

$('button').on('click', function(){
    showLoadingBar();
    longProcess();
    hideLoadingBar();
});

longProcess() 只是一个可能需要 1-3 秒来处理的函数（它进行大量计算并操作 DOM，但不执行任何 ajax 请求）。

现在，浏览器在这 1-3 秒内停止/冻结，所以我宁愿在这段时间内显示一个加载图标。这可能吗？我上面的代码几乎忽略了 showLoadingBar()。

Answer 1

在当前的 Javascript 进程结束之前，DOM 不会更新，所以你不能那样做。但是，您可以使用setTimeout来解决这个问题：

showLoadingBar();
setTimeout(function() {longProcess(); hideLoadingBar(); }, 1);

如果不清楚，上面发生的事情showLoadingBar是执行，然后设置超时。当前进程将结束并允许 DOM 在调用超时之前使用加载条进行更新，不久之后。处理程序执行您的繁重功能，完成后，再次隐藏加载栏。

Answer 2

以下将让您控制点击操作。这意味着您可以禁用点击功能，直到它完成运行。但我也包括了 setTimeout ，它将控制权返回给浏览器（从而消除了那种烦人的“锁定”感觉），并且在超时功能中，我们执行了漫长的过程，然后重新启用按钮！维奥拉！

function startProc() {
    var $this = $(this);
    $this.off("click", startProc);
    showLoadingBar();
    setTimeout(function() {
        longProcess();
        hideLoadingBar();
        $('button').on('click', startProc);
    });
}

$('button').on('click', startProc);

Answer 3

老兄，

使用 .bind 方法，在这种情况下执行如下：

$('button').bind('click', function(){
    showLoadingBar();
    longProcess();
    hideLoadingBar();
});