当javascript运行时显示消息

我知道最有可能这样的问题已被请求过几次，但我需要显示一个弹出窗口或消息或whatelse，当一个JavaScript函数被触发并隐藏它在最后。当javascript运行时显示消息

看到这个简单的JS fiddle

这就是HTML代码：

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

股利“消息”必须包含一个简单的文本，如“运行”或“请稍候”或...

这就是JS功能了（延迟）3秒：

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在进入循环之前包含“Please wait 3 seconds ...”，并且仅在结尾处包含“完成”字符串。

但事实并非如此。任何人都可以解释我（最有可能“再次”）为什么或建议一个链接在哪里可以找到答案？

来源

2014-05-16 Stefano Radaelli

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

使用setInterval,setTimeout或触发时间的下一个测试而不是循环。

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

来源

2014-05-16 15:04:07 Quentin

好的，这有点更清晰。所以原因是因为[虽然真的]陈述太重而无法正确处理。但是，如果[while（true）]语句被一段javascript代替（例如）需要更改页面上〜1000个不同div的边框颜色并且需要几秒钟，会发生什么？在这种情况下，我怎么能向用户展示消息，如处理期间的“请稍等”，甚至不知道需要多长时间？ –

与“等到功能完成运行”的优先级不同。如果你想更新很多元素，那么分批进行。 – Quentin

你有一个非常紧的循环（while（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.

来源

2014-05-16 15:06:39 Icarus

倒数会看起来更好:) –

尝试在功能完全运行完这个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); 
}

来源

2014-05-16 15:06:52

浏览器的显示才会更新。您可以使用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); 
}

来源

2014-05-16 15:16:14

这正是我需要的！谢谢！ –

当javascript运行时显示消息

回答

相关问题