如何使用 jQuery Promise 执行后台任务？答案

【问题标题】：How to perform background task with jQuery promise?如何使用 jQuery Promise 执行后台任务？
【发布时间】：2018-01-23 12:24:24
【问题描述】：

我有一个长同步函数，我想用 jQuery.when 和/或 jQuery.Deferred() 来保证它。

我很挣扎，没有找到任何例子！

示例（打字稿）：

public Bind(cell: number) {
    console.log("entering!");
    $.when(this.validateCell(cell)).done( () => {
        console.log("finished!");
    });
    console.log("out!");
}

private validateCell(cell: number): JQueryPromise<any> {
    const dfd = $.Deferred();
    console.log("0");
    for (let i = 0; i < 1000000000; i++) {
        const t = i;
    }
    console.log("1");
    dfd.resolve();
    return dfd.promise();
}

我明白了：

entering!
0
1
finished!
out!

虽然我想得到这个：

entering!
out!
0
1
finished!

提前谢谢你！

【问题讨论】：

您不能将长时间的同步任务设为异步 - JS 不会这样做。我知道的唯一例外是，如果您将该任务拆分为 WebWorker。
如果你的函数需要很长时间，因为它有太多的计算，你不会从使用 Promise 中得到任何好处。如果您必须等待一些异步操作（ajax 等），Promises 只会有帮助。

标签： javascript jquery asynchronous jquery-deferred

【解决方案1】：

如何使用 jQuery Promise 执行后台任务？

你不能。使用 Promise 不会改变工作在哪个线程上完成，只会（可能）何时完成。

如果您希望它在后台运行，您需要将其卸载到网络工作者（spec、MDN）。

【讨论】：

【解决方案2】：

尝试添加setTimeout

 private validateCell(cell: number): JQueryPromise<any> {
        const dfd = $.Deferred();
        console.log("0");
        setTimeout(function(){
           for (let i = 0; i < 1000000000; i++) {
               const t = i;
           }
         })
        console.log("1");
        dfd.resolve();
        return dfd.promise();
    }

【讨论】：

这行不通。它不仅仍然会导致长任务在主线程上发生（在运行时阻塞 UI），它还会立即解决 promise 而无需等待该任务。