javascript - 在 javascript 之后运行的内容更改

Question

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

我在 fiddle 上举了一个例子，用 sleep 函数替换了我的大函数。结果是一样的。

http://jsfiddle.net/9nzg9f6L/5/

这里是我在 html 页面中使用的代码:

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

这是javascript代码:

$("#clickme").click(function(){
    // this code only run after the sleep ...
    $('#msg').text("PROCESSING");

    console.log("text changed");

    sleep(5000);
    console.log("END function");

});


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

我无法修改 sleep(5000) 函数。它是专有和混淆功能的占位符。

即使这样: http://jsfiddle.net/9nzg9f6L/7/

不起作用。

Answer 1

看看我更新的 jsFiddle，它可以解决您的问题。

http://jsfiddle.net/9nzg9f6L/10/

更新代码

$("#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()) {}
}

这里我们使用 Self-Executing anonymous function和 jQuery's Deferred Object使用 setTimeout 确保慢速函数在不停止整个应用程序的情况下执行。完成后，我们可以调用函数二，在本例中它只是输出慢速函数已完成。