當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運行時顯示消息

回答

相關問題