提高UI響應度的一些技巧有哪些？

在下面的例子中，任何人都可以告訴我如何使「單擊時響應速度慢」更快地響應而無需修改appendContent（）？我想知道是否有辦法將廉價操作放在更昂貴的操作之前，並確保廉價操作能夠快速完成。提高UI響應度的一些技巧有哪些？

<div id="draw">slow response when clicked</div> 

<div style="overflow: auto; height: 300px; border:solid 1px grey" id="content"></div> 

<script language="javascript"> 

    var clickLink = document.getElementById("draw"); 
    var contentDiv = document.getElementById("content") 

    function appendContent(){ 
     contentDiv.innerHTML = contentDiv.innerHTML + "hello "; 
    } 

    clickLink.onclick = function(){ 
     clickLink.style.color = "red"; 
     for (var i = 0; i < 1500; i++){  
      appendContent();  
     } 
    }; 
</script>

來源

2009-02-23 morgancodes

你可能想提供一些代碼。 :) – Malfist 2009-02-23 22:25:41

好的。我相信。我會編寫一個例子。 – morgancodes 2009-02-23 22:49:10

反饋的機制應該是用戶必須等待的時長不同。小於0.1秒，用戶不會注意到。

在1到10秒之間，您可以簡單地顯示某種符號，例如表示您的應用正在處理的某種類型的動畫gif。請參閱http://www.ajaxload.info/ 我使用ID爲「正在處理」的div，並使用微調器對其進行設置，並使用以下jquery代碼在進程前後顯示和隱藏它。

function showProcessing(){ 
    $("#processing").fadeIn("fast"); 
} 

function hideProcessing(){ 
    $("#processing").fadeOut("fast"); 
}

超過10秒將提供處理時間的估計是理想的。

請參閱Response Time Overview這些數字的來源。

以下代碼會立即將鏈接顏色更改爲紅色，並稍後調用append方法幾分之一秒。本質上是允許瀏覽器在掛起循環之前執行單獨的線程。超時時間可能需要根據瀏覽器進行調整。如果您需要以更通用的方式放棄控制，請查看Neil Mix的Threading in JavaScript 1.7。

function startAppend(){ 
     for  (var i = 0; i < 1500; i++){    
       appendContent();   
     } 
    } 

    clickLink.onclick = function(){ 
      clickLink.style.color = "red"; 
      setTimeout('startAppend()', 10)     
    };

來源

2009-02-23 22:33:06

謝謝。在這一點上，數據已經在瀏覽器中，我只是重繪表格。我的問題是重繪似乎會干擾我的「處理」圖形。 Settimeout有幫助，但不是那麼多。 – morgancodes 2009-02-23 22:37:21