如何解决UI块,直到使用jQuery结束另一个JavaScript代码片段为止
| 我没有使用Ajax,但是我想显示一个加载屏幕,直到另一个JavaScript代码片段结束。 我在下面尝试过,但是似乎没有用。 任何帮助,高度赞赏。<html>
<head>
<title>Load Test</title>
<script type=\"text/javascript\" src=\"jquery-1.6.1.js\"></script>
<script type=\"text/javascript\" src=\"jquery.blockUI.js\"></script>
<script type=\"text/javascript\">
function linkHandler(){
for(i=0;i<2;i++){
for(j=0;j<500;j++){
document.getElementById(\"datafield\").value=document.getElementById(\"datafield\").value+new Date()+\"\\n\";
}
}
}
</script>
</head>
<body>
<textarea name=\"datafield\" id=\"datafield\" cols=\"80\" rows=\"15\"></textarea>
<br/>
<a href=\"javascript:void(0)\" >Link 1</a><br/>
<a href=\"javascript:void(0)\" >Link 2</a><br/>
<a href=\"javascript:void(0)\" >Link 3</a><br/>
<a href=\"javascript:void(0)\" >Link 4</a><br/>
<a href=\"javascript:void(0)\" >Link 5</a><br/>
<script type=\"text/javascript\">
$(\'a\').click(function(event) {
$.blockUI();
document.getElementById(\"datafield\").value=document.getElementById(\"datafield\").value+new Date()+\" Screen blocked \\n\";
linkHandler();
document.getElementById(\"datafield\").value=document.getElementById(\"datafield\").value+new Date()+\" Function over\\n\";
$.unblockUI();
document.getElementById(\"datafield\").value=document.getElementById(\"datafield\").value+new Date()+\" Screen unblocked \\n\";
return false;
});
</script>
</body>
</html>
解决方法
诀窍是,您应该删除linkHandler内的uiBlock(),以阻止用户单击任何内容或告诉他们正在处理某些内容。
注意:
给一些间隔,以便您可以看到它在运行中:-)。
看一下下面的代码,它可以工作。
<html>
<head>
<title>Load Test</title>
<script type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"http://jquery.malsup.com/block/jquery.blockUI.js?v2.38\"></script>
<script type=\"text/javascript\">
function linkHandler(){
for(j=0;j<5;j++){
document.getElementById(\"datafield\").value=document.getElementById(\"datafield\").value+new Date()+\"\\n\";
sleep(100);
}
sleep(100);
$.unblockUI();
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
</script>
</head>
<body>
<textarea name=\"datafield\" id=\"datafield\" cols=\"80\" rows=\"15\"></textarea>
<br/>
<a href=\"javascript:void(0);\" onClick=\"$.blockUI();sleep(100);setTimeout(\'linkHandler()\',500);\" >Link 1</a><br/>
</body>
</html>
希望它对您要达到的目标有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。