Question

我正在尝试学习jQuery延迟并在我的代码中实现它。

function function1() {
  $deferred = $.Deferred();
  setTimeout(function() {
    alert("Hello");
  }, 3000);
  return $deferred.promise();
}

function function2() {
  alert('done');
}
$("button").click(function() {
  function1().done(function2());
});

我有一个简单的函数function1和function2，我想在执行function2后调用function1，但我无法得到结果。任何人都可以指出我到底做错了什么。

我使用jquery-1.10.js作为我的版本

谢谢。

Answer 1

你非常接近。

您需要resolve您的承诺并使用.then： -

function function1() {
   $deferred = $.Deferred();
   setTimeout(function() {
     alert("Hello");
     $deferred.resolve();
   }, 3000);
   return $deferred.promise();
 }

 function function2() {
   alert('done');
 }
 $("button").click(function() {
   function1().then(function2);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>call</button>

Answer 2

你有几个问题：

你永远不会解决你的延期。您必须为def.resolve()调用它以通知承诺侦听器现在已解决了承诺。
function1().done(function2());需要function1().done(function2);。当你有function2()后的parens告诉JS解释器立即调用函数并传递返回值undefined。如果没有parens将函数的引用作为.done()处理程序传递，那么promise承诺基础结构可以稍后调用它（这就是你想要的）。

我建议使用以下代码：

function function1() {
    return $.Deferred(function(def) {
        console.log("start of function1");
        setTimeout(function() {
            console.log("timer fired");
            def.resolve();
        }, 3000);
    }).promise();
}

function function2() {
  console.log('done');
}
$("button").click(function() {
    function1().then(function2);
});

除了解决上述问题外，这也会发生变化：

它使用延迟构造函数。这节省了一些代码（使用较少的中间人），并且与ES6承诺规范更兼容，并且受jQuery支持。
它使用.then()而不是jQuery专有的.done()，它与ES6承诺规范更兼容并且受jQuery支持。

我还建议您升级到更新版本的jQuery，因为1.10已经3年多了。如果你必须保持与旧版IE的兼容性，你至少可以使用1.12.4。

jQuery延期 - 完成不起作用

2 个答案: