jquery的promise方法是如何真正起作用的？

Posted 2023-02-25

【中文标题】jquery的promise方法是如何真正起作用的？

【英文标题】：how does jquery's promise method really work?

【发布时间】：2011-08-30 02:51:03

【问题描述】：

我不太明白delegate 和promise 是什么。

根据文档 -

delegate 会将选择器和事件绑定到某种包装容器，该容器可以在以后再次用于当前和未来的项目。 如果新加载的所有内容都匹配，promise() 会将事物重新映射回第一次有界时。可能我不是很懂这个promise方法。

如果包装器仍然存在，但包装器容器中的内容已更改，和/或通过Ajax 重新加载，该怎么办？为什么事件没有像第一次绑定时那样触发或工作？

是的，我去过文档页面，我只是不完全理解他们的解释。

【参考方案1】：

我对这个问题有点困惑。我认为这是因为你被promise 和delegate 搞糊涂了。它们实际上是 jQuery 完全不相关的特性。我将分别解释：

delegate

delegate 是 jQuery 1.4.2 中引入的 jQuery 功能。 （这是对 jQuery 1.3 中添加的 live 功能的一种更好的方法）。它解决了修改 DOM 带来的特定问题，尤其是 AJAX 调用。

当您绑定一个事件处理程序时，您将它绑定到一个选择。因此，您可以使用$('.special').click(fn) 将事件处理程序绑定到special 类的所有成员。您绑定到这些元素，因此如果您随后从这些元素之一中删除该类，该事件仍将被触发。相反，如果将类添加到元素（或将新元素添加到 DOM），则不会绑定事件。

javascript 有一个特性可以缓解这种情况，称为“事件冒泡”。当一个事件被触发时，浏览器首先通知该事件起源的元素。然后它爬上 DOM 树，并通知每个祖先元素。这意味着您可以在 DOM 树的上层元素上绑定事件处理程序，并在任何子元素上触发事件（即使是在绑定处理程序时不存在的那些）。

delegate 是 jQuery 对此的实现。首先，您选择一个父元素。然后你指定一个选择器——只有当原始元素匹配这个选择器时，处理程序才会运行。然后指定一个事件类型，例如click、submit、keydown，就像bind一样。然后最后指定事件处理程序。

$('#containingElement').delegate('a.special', 'click', function() 
    alert('This will happen on all links with the special class');
);

promise

promise 是另一个相对较新的 jQuery 特性集。它是 jQuery 1.5 中引入的 Deferred 概念的一部分。 （我认为“deferred”和“delegate”之间声音的相似性可能是混淆的根源。）这是一种抽象异步代码复杂性的方法。最好的例子是 AJAX 调用，因为$.ajax 返回的对象是Deferred 对象。例如：

$.ajax(
    url: 'somepage.cgi',
    data: foo: 'bar'
).done(function() 
    // this will be run when the AJAX request succeeds
).fail(function() 
    // this will be run when the AJAX request fails
).always(function() 
    // this will be run when the AJAX request is complete, whether it fails or succeeds
).done(function() 
    // this will also be run when the AJAX request succeeds
);

所以它在很多方面与在$.ajax 调用中绑定成功处理程序相同，只是您可以绑定多个处理程序，并且可以在初始调用之后绑定它们。

另一个有用的异步处理是动画。您可以为函数提供回调，但最好使用与我上面提供的 AJAX 示例类似的语法来执行此操作。

在 jQuery 1.6 中，这个功能成为可能，promise 是这个实现的一部分。您在 jQuery 选择上调用 promise，当对象中的所有动画都完成时，您将获得一个可以绑定事件处理程序的对象。

例如：

$('div.special').fadeIn(5000).promise().then(function() 
    // run when the animation succeeds
).then(function() 
    // also run when the animation succeeds
);

同样，这在效果上与传统方法相似，但增加了灵活性。您可以稍后绑定处理程序，并且可以绑定多个。

总结

基本上，delegate 和 promise 之间没有显着关系，但它们都是现代 jQuery 中的有用特性。

【讨论】：

这很棒。谢谢你。这解释了为什么当我尝试在委托函数回调中加载 ajax 时，事件仅在第一次起作用，但当再次加载时，事件似乎不再触发。

很好的答案。顺便说一句，从 jQuery 1.7 开始，.delegate() 现在已被 .on() 方法取代。它可以像.bind()、.delegate() 或.live() 一样工作（取决于您传递的参数），并且它的语法比它们中的任何一个都好。

我建议用真正的 promise 方法替换 success error 和 complete done fail 和 always -- jqXHR 上的前 3 个别名已弃用并将在未来的版本中删除。

可以在自定义函数中添加promise吗？

您应该重写/澄清您在本节中关于delegate 的含义：“这意味着您可以将事件处理程序绑定到 DOM 树上的元素上，并在任何子元素上触发事件（即使是绑定处理程序时不存在的那些）。”我猜“在 DOM 中的高处”意味着更深的嵌套。但是，您所说的“......以及在任何子元素上触发的事件......”是什么意思？