Question

我正在使用一个简单的函数，在它运行一个慢函数之前，它在页面中放置一个文本：“loading”。但是这个文本只在功能结束后显示。我确实尝试添加一个css，但它只在函数完成后运行。

我在小提琴上放了一个例子，用睡眠功能取代了我的大功能。结果是一样的。

这里是我在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来确保执行缓慢的功能而不停止整个应用。完成后，我们可以调用Function 2，在这种情况下只输出慢函数完成。

Answer 2

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

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

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

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

演示： http://jsfiddle.net/9nzg9f6L/6/

但是当然如果可以使慢速代码异步，那么在这种情况下它将是最好的方法。阻止UI永远不是一个好的用户体验。另请查看WebWorkers。

内容更改在javascript之后运行

2 个答案: