Question

我知道很可能已经多次要求这样的问题，但我需要在触发javascript函数时显示弹出窗口或消息或whatelse，并在最后隐藏它。

见这个简单的js fiddle

这是HTML代码：

<div id='message'>Default message</div>
<input type='button' onclick='Run();' value='start'>

div＆＃39;消息＆＃39;必须包含一个简单的文本，例如＆＃34; running＆＃34;或者＆＃34;请等待＆＃34;或者......

那个花了（延迟）3秒的JS功能：

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＆＃39; div包含＆＃34;请等待3秒......＆＃34;在进入循环之前＆＃34;完成＆＃34;字符串只在最后。

但事实并非如此。谁能解释我（最有可能＆＃34;再次＆＃34;）为什么或建议一个链接在哪里找到答案？

Answer 1

JS事件循环太忙于运行while (true) {}来处理DOM重绘。

使用setInterval，setTimeout或requestAnimationFrame来触发下一次测试，而不是循环。

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');
    }
}

Answer 2

试试这个http://jsfiddle.net/aamir/23ZFY/11/

function Run() {
    var secs = 3;
    $('#message').text('Please wait '+ secs +' seconds...');
    var timer = setInterval(function () {
        if (secs == 1) {
            clearTimeout(timer);
            $('#message').text('Done');
            return;
        }
        secs--;
        $('#message').text('Please wait ' + secs + ' seconds...');
    }, 1000);
}

Answer 3

浏览器的显示仅在功能完全运行时更新。您可以使用setTimeout异步运行第二批代码。

function Run() {

    $('#message').text('Please wait 3 seconds...');
    setTimeout(

    function () {
        var start = new Date().getTime();
        while (true) {

            current = new Date().getTime();
            if ((start + 3000) < current) {
                break;
            }
        }
        $('#message').text('Done');
    },0);
}

Answer 4

你有一个非常紧的循环（而（true）...），它根本不允许UI更新。你可以做的是：

function Run() {
    var delay = 3000; //-- 3 seconds    
    $('#message').text('Please wait ' + (delay/1000) + ' seconds...');
    setTimeout(function () {
          $('#message').text('Done');       
    }, delay);
}

基本上，最初设置“等待消息”并使用setTimeout功能在3秒后再次更新消息。

Updated fiddle.

在javascript运行时显示消息

4 个答案: