jQuery 延期 - 完成无效

Question

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

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

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

我有一个简单的函数 function1 和 function2，我希望在执行 function1 后调用 function2，但我无法获得结果。谁能指出我到底做错了什么。

我正在使用 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() 才能通知 promise 侦听器 promise 现已解决。
function1().done(function2()); 需要 function1().done(function2);。当你在 function2() 之后有括号时，它告诉 JS 解释器立即调用该函数并传递 return 值，即 undefined。如果没有括号，则将对函数的引用作为 .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 promise 规范并得到 jQuery.
它使用 .then() 而不是 jQuery-proprietary .done()，它更兼容 ES6 promise 规范并受到 jQuery 的支持。

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

jQuery 延期 - 完成无效

jQuery deferred - done not working

jquery

jquery-deferred