在javascript运行时显示消息 [英] Show message while javascript is running
问题描述
我知道很可能已经多次询问过这样的问题,但是我需要在触发javascript函数时显示弹出窗口或消息或其他内容,并在最后将其隐藏.
I know that most probably such question has been requested several times but I have a need to show a popup or message or whatelse when a javascript function is triggered and hide it at the end.
请参阅以下简单的js 小提琴
See this simple js fiddle
那是HTML代码:
<div id='message'>Default message</div>
<input type='button' onclick='Run();' value='start'>
div的消息"必须包含一个简单的文本,例如正在运行"或请稍候"或...
the div 'message' has to contain a simple text like "running" or "please wait" or ...
这是JS函数,它花了3秒钟(延迟):
That's the JS function that took (delay) 3 seconds:
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
var start = new Date().getTime();
while (true) {
current = new Date().getTime();
if ( (start + delay) < current) {
break;
}
}
$( '#message' ).text('Done');
}
预期的行为是,'#message'div包含请稍等3秒...",然后才能进入循环,并且仅在末尾输入完成"字符串.
The expected behaviour is that the '#message' div contains "Please wait 3 seconds..." before to enter in the loop and "Done" string only at the end.
但这不是. 任何人都可以(最可能是再次")向我解释原因或建议在哪里找到答案的链接?
But that's not. Can anyone explain me (most probably "again") why or suggest a link where to find an answer?
推荐答案
JS事件循环正忙于运行while (true) {}
,无法处理DOM重绘.
The JS event loop is too busy running while (true) {}
to handle a DOM repaint.
使用setInterval
,setTimeout
或requestAnimationFrame
触发时间的下一个测试,而不是循环.
Use setInterval
, setTimeout
, or requestAnimationFrame
to trigger the next test of the time instead of a loop.
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
var start = new Date().getTime();
setTimeout(whenDelayIsOver, 50);
function whenDelayIsOver() {
if ( (start + delay) < current) {
$( '#message' ).text('Done');
} else {
setTimeout(whenDelayIsOver, 50);
}
}
}
…或首先使用setTimeout
.
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
setTimeout(whenDelayIsOver, delay);
function whenDelayIsOver() {
$( '#message' ).text('Done');
}
}
这篇关于在javascript运行时显示消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!