在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屋！