大佬教程收集整理的这篇文章主要介绍了jQuery / Javascript – 在进行功能之前如何等待操纵的DOM进行更新,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到的是,div从来没有被更新为“Processing …”.如果我在该命令之后立即设置了一个断点,那么这个div文本会被更新,所以我知道语法是正确的. IE9,FF6,Chrome13相同的行为.
即使绕过jQuery并使用基本的原始Javascript,我也看到同样的问题.
你会认为这会有一个简单的答案.但是,由于jQuery .html()和.text()没有回调钩子,所以不是一个选项.它也没有动画,所以没有任何行动来操纵.
您可以使用我在下面准备的示例代码来测试这个,它显示了具有5秒高cpu功能的jQuery和Javascript实现.代码很容易遵循.当您点击按钮或链接时,您将看不到“处理中…”
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script> <script type="text/javascript"> function addSecs(d,s) {return new Date(d.valueOf()+s*1000);} function doRun() { document.getElementById('msg').innerHTML = 'Processing Js...'; start = new Date(); end = addSecs(start,5); do {start = new Date();} while (end-start > 0); document.getElementById('msg').innerHTML = 'Finished JS'; } $(function() { $('button').click(function(){ $('div').text('Processing JQ...'); start = new Date(); end = addSecs(start,5); do {start = new Date();} while (end-start > 0); $('div').text('Finished JQ'); }); }); </script> </head> <body> <div id="msg">Not Started</div> <button>jQuery</button> <a href="#" onclick="doRun()">javascript</a> </body> </html>
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script> <script> function addSecs(d,s) {return new Date(d.valueOf()+s*1000);} function doRun() { document.getElementById('msg').innerHTML = 'Processing Js...'; setTimeout(function(){ start = new Date(); end = addSecs(start,5); do {start = new Date();} while (end-start > 0); document.getElementById('msg').innerHTML = 'Finished Processing'; },10); } $(function() { $('button').click(doRun); }); </script> </head> <body> <div id="msg">Not Started</div> <button>jQuery</button> <a href="#" onclick="doRun()">javascript</a> </body> </html>
您可以根据需要修改setTimeout延迟,对于较慢的机器/浏览器可能需要更大.
编辑:
您还可以使用警报或确认对话框来允许页面更新时间.
document.getElementById('msg').innerHTML = 'Processing Js...'; if ( confirm( "This task may take several seconds. Do you wish to conTinue?" ) ) { // run code here }
以上是大佬教程为你收集整理的jQuery / Javascript – 在进行功能之前如何等待操纵的DOM进行更新全部内容,希望文章能够帮你解决jQuery / Javascript – 在进行功能之前如何等待操纵的DOM进行更新所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。