如何将加载图标添加到只处理JavaScript代码的页面？

我一直在使用Ajax加载图标来执行ajax请求。如何将加载图标添加到只处理JavaScript代码的页面？

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

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

longProcess（）仅仅是需要1-3秒来处理（它做了很多的计算和操纵DOM，但没有做任何Ajax请求）的功能。

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

来源

2012-11-05 Justin

那是因为你的职责是同步的。它等待当前功能完成，直至碰到下一个 –

你不应该有1到3第二个功能可言，最大应该是200毫秒在页面感觉没有响应之前。看看http://stackoverflow.com/q/10180391/1048572，http://stackoverflow.com/q/4288759/1048572和链接（相关）的问题 – Bergi

DOM将不会更新，直到当前Javascript过程结束，所以你不能这样做。但是，您可以使用setTimeout要解决这个问题：

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

以上会发生什么，如果它是不明确的，就是showLoadingBar被执行，则超时设置。然后当前进程结束并允许DOM在调用超时之前使用加载栏进行更新，在很短时间之后。处理程序执行您的繁重功能，并在完成后再次隐藏加载栏。

来源

2012-11-05 21:03:33 troelskn

我以前使用setTimeout，但我从来没有意识到它会导致当前进程结束并更新DOM。这正是我需要的，谢谢。 – Justin

-3

哥们，

使用.bind方法，在这种情况下是这样进行的：

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

来源

2012-11-05 21:08:51

这没有什么不同。 – jfriend00

下面将为你过上单击动作控制。这意味着您可以禁用点击功能，直到它完成运行。但也包括setTimeout，它将控制返回给浏览器（从而消除恼人的“锁定”感觉），并在超时函数中执行我们的长时间过程，然后重新启用按钮！ VIOLA！

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

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

来源

2012-11-05 21:12:40 SpYk3HH

这是我会用到的，因为我一直想在发生某些事情时禁用单击按钮。感谢这个想法。 – Justin

如何将加载图标添加到只处理JavaScript代码的页面？

回答

相关问题