Question

我很难理解为什么在jQuery执行代码时我无法更新DOM。这不是我的实际情景，但我认为它可以解决我遇到的问题。

我有一个名为btnSubmit的按钮。当用户单击它时，我想显示一个div元素，告诉用户正在进行一些处理。这是代码：

$("#btnSubmit").bind("click",
    function () {
        $('#divProcessing').addClass('showProcessing');
        <processing goes here>
        debugger;
    });

处理可能需要也可能不需要AJAX调用。

这是我的问题：如果我允许我的脚本在调试器语句上中断，则浏览器中的页面不会更新。在脚本运行完毕之前，它不会更新。

我见过很多关于如何做到这一点的例子（使用.ajaxStart等...），但是它们都不适用于我。任何建议将不胜感激！

Answer 1

JavaScript是设计上的单线程。更新DOM中的元素时，它将在内存中更新，以便您可以在更多JavaScript代码中访问更新。但是，在脚本完成并将执行传递回浏览器窗口之前，浏览器显示本身不会更新。

使用setTimeout是有效的，因为它会在click函数完成后释放执行，并且浏览器有机会在调用传递给setTimeout的函数之前更新页面。

通过将debugger;语句放在click函数中，在调试器中暂停执行之前，永远不会给浏览器窗口提供更新的机会。

您可以在alert();语句之前直接放置debugger;语句。通过打开警报窗口，JavaScript执行将暂停，执行将传递回浏览器，直到警报关闭。

<强>更新 Firefox和Chrome将在调试程序停止执行时更新页面。 Internet Explorer不会。

Answer 2

我在http://jsfiddle.net/ggYZM/4/

中创建了以下内容

$("#btnSubmit").bind("click", function() {
    console.log("running");
    $('#mydiv').addClass('showProcessing');
    alert("here"); // blocks the browser
    setTimeout(doneProcessing, 5000);

});

function doneProcessing() {
    $('#mydiv').removeClass('showProcessing');
    console.log('finished');
}

<div id="mydiv"></div>
<input type="button" id="btnSubmit" value="Click Me!" />

#mydiv {
    border: 1px solid black;
    width: 200px;
    height:200px;
}

.showProcessing {
    background-color:blue;
}

它的功能完全符合预期 - 该类立即被添加，并且警告框后面的变化清晰可见......您的实现其他一些必定是错误的...也许CSS不正确？

Answer 3

尝试.show（）。或者只是将div设为对话框并使用$（“＃divid”）。dialog（“open”）;

与jQuery绑定时，DOM更改不会实时反映

3 个答案: