Javascript 有哪些技术可以提高UI响应能力？

在下面的示例中，有人能告诉我如何在不修改appendContent（）的情况下使“单击时响应缓慢”更快地响应吗？我想知道是否有一种方法可以将便宜的业务放在更昂贵的业务之前，并确保便宜的业务能够迅速实施

<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>

单击时响应缓慢
var clickLink=document.getElementById（“draw”）；
var contentDiv=document.getElementById（“内容”）
函数appendContent（）{
contentDiv.innerHTML=contentDiv.innerHTML+“你好”；
}
clickLink.onclick=function（）{
单击link.style.color=“红色”；
对于（var i=0；i<1500；i++）{
附件内容（）；
}
};

由于javascript没有很好的多线程支持，您需要将dom操作拆分为更小的部分。通常，这些事情都是通过在单独的线程中执行长时间操作来完成的。

Yahoo用户界面库有很多好的代码和控件，它们已经使用AJAX等技术来提高web应用程序的感知响应能力

使用像Yahoo这样的库s将使将此功能添加到应用程序中的速度更快，更不容易出错

---

在用户等待的时间内，反馈机制应该不同。少于0.1秒，用户不会注意到

在1到10秒之间，您可以简单地显示一个符号，例如某种类型的动画gif，表示您的应用正在处理。看见 我使用ID为“processing”的div，并使用微调器对其进行样式设置，并使用以下jquery代码在处理前后显示和隐藏它

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

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

超过10秒时，最好提供处理时间的估计值

有关这些数字的来源，请参阅

下面的代码立即将链接颜色更改为红色，并在几分之一秒后调用append方法。本质上是允许浏览器在挂起循环之前执行单独的线程。根据浏览器的不同，可能需要调整超时。如果你需要以一种更通用的方式放弃控制权，请查看Neil Mix

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

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

函数startAppend（）{
对于（var i=0；i<1500；i++）{
附件内容（）；
}
}
clickLink.onclick=function（）{
单击link.style.color=“红色”；
setTimeout（'startAppend（）'，10）
};

如果您只想向用户提供一些反馈，让他们知道发生了什么事情，您可以尝试在按钮旁边放置一个动画gif——加载圆圈或其他东西，然后禁用按钮本身，然后在重画完成后将一切恢复正常。

尝试以下操作：在默认情况下添加一个包含加载图形的div，但将CSS设置为display:none。然后，单击div#draw时，将加载图形的显示设置为block，然后进行绘图。绘制完成后，将显示设置回无。

您可能需要提供一些代码。：）好啊我确信。我将编写一个示例。谢谢。此时，数据已经在浏览器中，我正在重新绘制一个表。我的问题是，重画似乎干扰了我的“处理”图形。Settimeout有帮助，但没有那么多。编辑问题以共享代码，也许我们可以进行优化。谢谢Michael。这确实有效。我在我的非示例页面上也做了类似的事情，但仍然有一些延迟。我去看看。感谢您确认设置超时确实有效。在进行大屏幕重画时，链接设置超时是否可行？例如，一次绘制100行表格？有这样的例子吗？谢谢。我已经在做类似的事情了。问题是单击和图形显示之间存在延迟。