内容更改在javascript之后运行

我使用的是一个简单的函数，在它运行一个缓慢的函数之前，它会在页面中放置一个文本：“加载”。但此文本仅在函数完成后显示。 我也尝试添加css，但它只在函数完成后运行

我在小提琴上放了一个例子，用一个睡眠函数替换了我的大函数。结果是一样的

下面是我在html页面中使用的代码：

<div  id='msg'>BEGIN</div>    
<div style="cursor: pointer; color:red;" id='clickme'>click me!</div>

我无法修改sleep（5000）函数。它是专有和模糊功能的占位符

即便如此：

---

不起作用。

看看我更新的JSFIDLE，它解决了您的问题

更新代码

$("#clickme").click(function(){

    //Call slow func using a Self Executing func.
    (function(){
        //Create the deferred object to use
        var defObj1 = $.Deferred();

        //Call you slow func
        $('#msg').text("PROCESSING");
        setTimeout(function(){
                sleep(5000)
                defObj1.resolve();
        }, 500);

        return defObj1;  

    })().done(FunctionTwo);
})

//We call this once the Sleep function is done.
var FunctionTwo = function(){
    $('#msg').text("FUNCTION ONE COMPLETED OK..");
};

//Make it slow....
function sleep(miliseconds) {
    var currentTime = new Date().getTime();
    while (currentTime + miliseconds >= new Date().getTime()) {}
}

---

在这里，我们使用and和

setTimeout

来确保执行缓慢的函数时不会停止整个应用程序。完成后，我们可以调用函数2，在本例中，它只输出慢函数已完成。

看看我更新的JSFIDLE，它解决了您的问题

更新代码

$("#clickme").click(function(){

    //Call slow func using a Self Executing func.
    (function(){
        //Create the deferred object to use
        var defObj1 = $.Deferred();

        //Call you slow func
        $('#msg').text("PROCESSING");
        setTimeout(function(){
                sleep(5000)
                defObj1.resolve();
        }, 500);

        return defObj1;  

    })().done(FunctionTwo);
})

//We call this once the Sleep function is done.
var FunctionTwo = function(){
    $('#msg').text("FUNCTION ONE COMPLETED OK..");
};

//Make it slow....
function sleep(miliseconds) {
    var currentTime = new Date().getTime();
    while (currentTime + miliseconds >= new Date().getTime()) {}
}

---

在这里，我们使用and和

setTimeout

来确保执行缓慢的函数时不会停止整个应用程序。完成后，我们可以调用函数2，在本例中，函数2只输出慢函数已完成。

这里的问题是，由于javascript是单线程语言，浏览器没有足够的时间在“慢”函数完全阻塞UI之前更改DOM。为了克服这种情况，通常将缓慢的操作延迟很短的时间，以便DOM更新可以在错误代码开始工作之前完成：

$("#clickme").click(function(){

    $('#msg').text("PROCESSING");
    $('#msg').addClass("message");

    setTimeout(function() {
        sleep(5000);
    }, 50);
});

演示：

---

当然，如果可以使慢代码异步，那么在这种情况下，这将是最好的方法。阻塞用户界面从来都不是一个好的用户体验。另外请注意。

这里的问题是，由于javascript是单线程语言，所以浏览器在“缓慢”功能完全阻塞UI之前没有足够的时间修改DOM。为了克服这种情况，通常将缓慢的操作延迟很短的时间，以便DOM更新可以在错误代码开始工作之前完成：

$("#clickme").click(function(){

    $('#msg').text("PROCESSING");
    $('#msg').addClass("message");

    setTimeout(function() {
        sleep(5000);
    }, 50);
});

演示：

---

当然，如果可以使慢代码异步，那么在这种情况下，这将是最好的方法。阻塞用户界面从来都不是一个好的用户体验。另外，请注意。

在JavaScript中，这不是设置计时器的方式！一个

while

循环，在经过适当的时间之前什么也不做？认真地改用。问题不是设置超时。在我的真实代码中，我不调用计时器。我正在使用插件功能。我也有同样的行为。我也不能修改这个函数。哦，我明白了。。。sleep函数是一个“重函数”的占位符。是的，它是模糊的。这不是JavaScript中设置计时器的方式！一个

while

循环，在经过适当的时间之前什么也不做？认真地改用。问题不是设置超时。在我的真实代码中，我不调用计时器。我正在使用插件功能。我也有同样的行为。我也不能修改这个函数。哦，我明白了。。。睡眠功能是“重功能”的占位符。是的，它被混淆了。我无法修改睡眠（5000）；事实上，我没有使用这个睡眠功能。我正在使用另一个有同样问题的函数。我不能修改它，因为它是专有的，而且是模糊的。@Ricardofereira:但是你不能像Dayan建议的那样，在一个超时时间内包装“重载”函数吗？@Ricardofereira看看我更新的答案和jFiddle。通过使用jquery的.deferred对象，它完全满足了您的需要。谢谢@Dayan您更新的答案有效，但来自dfsk的答案也有效。我无法修改睡眠（5000）；事实上，我没有使用这个睡眠功能。我正在使用另一个有同样问题的函数。我不能修改它，因为它是专有的，而且是模糊的。@Ricardofereira:但是你不能像Dayan建议的那样，在一个超时时间内包装“重载”函数吗？@Ricardofereira看看我更新的答案和jFiddle。通过使用jquery的.deferred对象，它完全满足了您的需要。谢谢@Dayan您更新的答案可以使用，但是来自dfsk的答案也可以使用。