3

在下面的示例中，谁能告诉我如何在不修改 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>
4

5 回答 5

1

对于用户必须等待的持续时间，反馈机制应该不同。不到 0.1 秒，用户不会注意到。

在 1 到 10 秒之间，您可以简单地显示一个符号，例如某种表示您的应用正在处理的动画 gif。请参阅http://www.ajaxload.info/ 我使用带有 ID“处理”的 div 并使用微调器对其进行样式设置，并使用以下 jquery 代码在处理之前和之后显示和隐藏它。

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

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

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

有关这些数字的来源，请参阅响应时间概述。

以下代码立即将链接颜色更改为红色，并在几分之一秒后调用 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-23T22:33:06.160 回答
1

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

于 2009-02-23T22:34:56.157 回答
0

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

于 2009-02-23T22:28:44.750 回答
0

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

使用 Yahoo! 之类的库可以更快地向您的应用程序添加此功能，并且更不容易出错。

http://developer.yahoo.com/yui/

于 2009-02-23T22:32:30.560 回答
0

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

于 2009-02-24T00:43:53.490 回答