在 jquery 中使用 Deferred/When 来延迟函数的问题答案

【问题标题】：Issues Using Deferred/When in jquery to defer a function在 jquery 中使用 Deferred/When 来延迟函数的问题
【发布时间】：2014-07-31 09:01:12
【问题描述】：

我真的很难在我的 jquery 脚本中使用 Deferred 或 When。我在这里和其他地方（包括 api.jquery.com）阅读了许多文章，我认为我只是有点太初学者，无法准确理解如何使用这些调用。

我正在尝试推迟一个函数的运行，直到脚本中的前一个函数完成。

我有

function datapoints () {
    //My long function here where I define $data
};

其中的结果是一个名为 $data 的数组。我需要在下一个函数中定义 $data 变量，所以我想推迟它。

我尝试过这样设置延迟：

var deferred = $.Deferred();

deferred.resolve(datapoints());

deferred.done(function result (){
    // My function here where I use $data
        }
    );

我非常感谢一些关于如何清理它的指示。我尝试重新创建各种示例，但每次结果都是控制台错误，提示 $data 未定义。我知道代码可以工作，因为当我在运行第二个函数之前手动设置几秒钟的 setTimeout 时，一切正常，但我认为 deferred 是一个更好的解决方案。

提前致谢！

【问题讨论】：

所以$data 是全球性的——比如window.$data？和datapoints 和result 使用它？因为你说的是$data，没有解释定义和用法
(a) 显示一些异步，(b) datapoints() 返回什么？
@Roamer-1888 - 我认为这是我的问题，它实际上不是异步的。如问题所述，datapoints() 返回一个名为 data 的 [array]。
Meaghan，在这种情况下，您不需要 Deferred/Promise。忽略所有尝试的答案并使用标准的阻止代码；还记得每行在前一行之后执行的老式编程方式吗？ :)，例如。 var datapoints = makeDatapoints(); var result = makeResult(datapoints); 或 var result makeResult(makeDatapoints());.

标签： javascript jquery jquery-deferred deferred

【解决方案1】：

尝试像这样修复您的代码：

deferred.done(function result (data){
    // Do not use global $data, use local 'data' instead
    }
);

这将确保您使用的数据实际上是datapoints() 返回的数据。

您还应该知道，除非datapoints() 是异步函数，否则您编写的代码将阻塞 JS 线程（即，如果在浏览器中运行 - 它会阻塞 UI）。

具有同步函数的承诺/延迟并没有多大用处。

通常的模式是这样的：

function datapoints() {
   var d = $.Deferred()
   asyncCallToCreateDatapoints(function callback(data) {
      d.resolve(data)
   })
   return d;
}

datapoints().done(function result(data) {
   /* do stuff with data */
})

【讨论】：

我认为您无意中用“除非 datapoints() 是异步函数，否则您编写的代码将阻塞 JS 线程（即，如果在浏览器中运行 - 它会阻塞用户界面）。”我不认为这是一个异步函数。可能需要做更多的挖掘。

【解决方案2】：

试试这个代码：

function datapoints () {
    var deferred = $.Deferred();

    /* later, when data is ready, call:

        deffered.resolve(data);
    */

    return deferred.promise();
}


datapoints().then(function () {
    // runs when data is ready         
})

【讨论】：

【解决方案3】：

不完全确定您的问题是什么，但这个jsfiddle 对我来说很好。

function datapoints () {
    //My long function here where I define $data
    return {"datapoint1": 1, "datapoint2": 2};
};

var deferred = $.Deferred();

deferred.resolve(datapoints());

deferred.done(function result (data){
    // My function here where I use $data
    console.log("data: ", data);
});

【讨论】：