Jquery Promise & When without Ajax

Posted 2023-02-25

【中文标题】Jquery Promise & When without Ajax

【英文标题】：

【发布时间】：2016-06-10 10:25:57

【问题描述】：

我绞尽脑汁想弄清楚如何正确使用它。大多数示例都使用 ajax，所以这甚至是不可能的。

在我的示例中，我创建了一个使元素淡出的函数。我知道.fadeOut 可以有回调，但我想避免这种情况只是为了学习。

我读到我需要返回一个承诺，否则$.when().done() 会立即触发。即使我附加了一个承诺，它仍然会立即触发。

这是我的简单代码

function hide() 
    return $("#element").fadeOut(250).promise();


$.when( hide() ).done(function()
    alert("Hidden");
);

是否有某些方法不能与$.when() 一起使用，例如.fadeOut()？

在理解方面的任何帮助都会很棒。

【问题讨论】：

$.Deferred 会很棒

“即使我附加了一个承诺，它仍然会立即触发。” 请注意，fadeOut 的持续时间只有 250ms js 在 Question ;尝试增加duration 的.fadeOut() 吗？预期的结果是什么？

@NorlihazmeyGhazali 你能解释一下吗？

@guest271314 是的，我已经增加到 10000 毫秒，它仍然会立即触发。 hide() 函数由按下按钮触发。我不确定这是否会导致某种问题。

如果你传递多个参数给它，你只需要使用$.when。否则，直接在该参数上调用.done。

【参考方案1】：

我不是 Promise 方面的专家，但您似乎不需要返回 Promise。

https://api.jquery.com/promise/

https://jsfiddle.net/6mLshe77/

function hide() 
    return $("#element").fadeOut(1000);


$.when( hide() ).done(function()
    alert("Hidden");
);

【讨论】：

好吧，也许我都错了。 $.when()会触发函数hide()吗？

好吧，调用hide()触发函数，只是hide()的返回值是一个延迟对象，$.when()接受它作为参数。因此发生了一些 jquery 魔术，然后您可以将 done 和 fail 方法链接到 $.when。

@VIDesignz:“$.when() 会触发函数hide()吗？” 你说的“触发”是什么意思？您正在（正确地）将调用hide 的返回值 传递给$.when。 $.when 对 hide 函数本身没有任何作用。

@FelixKling 那么他的 jsfiddle 是如何运行隐藏函数而不调用它的呢？

@FelixKling 我现在明白了，我认为$.when() 更像是一个听众。等待在其他地方调用hide()。我没有意识到hide() 就在那里跑了。

【参考方案2】：

您应该重新排列 .done() 的位置。在https://jsfiddle.net/6mLshe77/7/hide() 函数被立即调用，无需等待click 事件$.when( hide() ).done(function()alert("Hidden");)

var div = $("<div/>").attr(
  id: "element"
);

$("button").on("click", function() 
  $("#wrapper").append(div);
  hide().done(function() 
    alert("Hidden");
  );
)

function hide() 
  return $("#element").fadeOut(1000).promise();

div 
  width: 100px;
  height: 100px;
  border: 1px solid black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="wrapper"></div>

<button>
  Click Me
</button>

jsfiddle https://jsfiddle.net/6mLshe77/9/

【讨论】：

这更有意义。我不知道 hide() 是立即被调用的。我假设 $when() 正在“等待”它在其他地方被调用。

@VIDesignz hide() 在$.when() 被调用，而无需在jsfiddle.net/6mLshe77/7 等待click 事件。可以创建一个 $.Deferred() 对象，在调用 .done() 之前等待 deferred 被解析 - 尽管从函数返回 jQuery .promise() 对象时没有必要。 $.when() 是 $.Deferred(beforeStart) 的别名。另见api.jquery.com/jQuery.when、api.jquery.com/jQuery.Deferred、api.jquery.com/promise

@VIDesignz: () 在函数引用之后（hide 解析为函数）总是调用函数。