Question

我有一个非常简单的问题。我有一个onclick功能，需要10秒才能完成。因此，我希望在功能完成时添加“正在加载，请稍候”文本。

如果我这样做：

javascript:
function onclickFunction(){
    addPleaseWait();
    runSlowFunction();
    addFinishedText();
}

然后当然最终结果是慢速函数首先运行，然后addPleaseWait和FinishedText运行第2和第3。这样做的正确方法是什么？

Answer 1

如果您被允许使用ES6功能，我建议您使用promise来运行您的功能。

function onclickFunction() {
    startLoader();
    longFunction().then(function(data) => {
        // long function is done, remove loader
        return removeLoader();
    }) 
}

function longFunction() {
    return new Promise(function(resolve, reject) {
        /*
        * the parameter resolve tell when to finish. If you pass a function, it will finish once all the instruction of the function is done.
        * the parameter reject is used to manage error.
        */
        resolve(function() {
            // Do you long function stuff
        })
    })
}

这种方法对于你想要实现的目标来说可能会有点复杂，但我认为这是处理慢速功能的好方法。确保每件事都以正确的顺序排列。

如果您想了解有关承诺的更多信息，请查看此Mozilla docs link

Answer 2

您需要在慢速函数中进行回调，例如

runSlowFunction(callback) {
  // ... do all slow things, and in the end, call your function
  callback();
}

＆安培;然后，你的onclick功能变为

function onclickFunction(){
    addPleaseWait();
    runSlowFunction(addFinishedText); 
    // pass addFinishedText as the callback,
    // which gets called after the slow function is done
}

Answer 3

＆＃13;

function call() {
  //your function here for example :
  $("#yourFunction").html("yourFunction is executing....");
  $("#test").html("Please Wait....."); // during your function
  setTimeout(function() {
    $("#yourFunction").html("yourFunction is completed....");
    $("#test").html("done!!!!"); // after your function completed

  }, 1000); // if you need more or less time change here 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button onclick=call()>Click</button>
<div id="yourFunction"></div>
<div id="test"></div>

＆＃13;

在javascript完成之前和之后的onclick更新文本

3 个答案: