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

how does jquery's promise method really work?

提问by robx

I don't really understand what delegateand promiseare.

我真的不明白是什么delegate和promise有。

According to the docs -

根据文档 -

• delegatewould bind a selector and event to some sort of wrapping container that can be used again at a later time for current and future items.
• promise()would remap things back to when it was first bounded if everything newly loaded matches. Maybe I don't really understand this promise method.

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

What if the wrapper is still there, but the contents in the wrapper container have changed, and/or reloaded via Ajax? Why is it that the events are not triggering or working as it would the first time it is bound?

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

And yes, I have been to the docs page, I just don't understand their explanations completely.

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

回答by lonesomeday

I'm a bit confused by this question. I think this is because youare confused by promiseand delegate. They are in fact completely unrelated features of jQuery. I'll explain each separately:

我对这个问题有点困惑。我认为这是因为您对promise和感到困惑delegate。它们实际上是与 jQuery 完全无关的特性。我将分别解释：

delegate

delegate

delegateis a feature of jQuery that was introduced in jQuery 1.4.2. (It is a nicer approach to the livefeature that was added in jQuery 1.3). It solves a particular problem that comes with modifying the DOM, and particularly with AJAX calls.

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

When you bind an event handler, you bind it to a selection. So you might do $('.special').click(fn)to bind an event handler to all the members of the specialclass. You bind to those elements, so if you then remove the class from one of those elements, the event will still be triggered. Inversely, if you add the class to an element (or add a new element into the DOM), it won't have the event bound.

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

There is a feature of Javascript that mitigates this called "event bubbling". When an event is triggered, first the browser notifies the element where the event originated. Then it goes up the DOM tree, and notifies each ancestor element. This means that you can bind an event handler on an element high up the DOM tree, and events triggered on any child elements (even those that don't exist when the handler was bound).

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

delegateis jQuery's implementation of this. First, you select a parent element. Then you specify a selector – the handler will only be run if the originating element matches this selector. Then you specify an event type, such as click, submit, keydown, just as with bind. Then finally you specify the event handler.

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

promiseis another relatively recent addition to the jQuery featureset. It is part of the Deferredconcept that was introduced in jQuery 1.5. (I think the similarity in sound between "deferred" and "delegate" is probably the source of confusion.) This is a way of abstracting away the complications of asynchronous code. The best example of this is with AJAX calls, as the object returned by $.ajaxis a Deferredobject. For instance:

promise是 jQuery 功能集的另一个相对较新的补充。它是DeferredjQuery 1.5 中引入的概念的一部分。（我认为“延迟”和“委托”之间声音的相似性可能是混淆的根源。）这是一种抽象异步代码复杂性的方法。最好的例子是 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
});

So it is in many ways the same as binding success handlers in the $.ajaxcall, except that you can bind more than one handler, and you can bind them after the initial call.

所以它在很多方面和$.ajax调用中绑定成功处理程序是一样的，只是可以绑定多个处理程序，并且可以在初始调用后绑定。

Another time when it would be useful to deal asynchronously is with animations. You can provide callbacks to functions, but it would be nicer to do this with similar syntax to the AJAX example I've provided above.

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

In jQuery 1.6, this functionality was made possible, and promiseis part of this implementation. You call promiseon a jQuery selection, and you'll get an object that you can bind event handlers to, when all the animations in the object have completed.

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

For instance:

例如：

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

Again, this is similar in effect to traditional methods, but it adds flexibility. You can bind the handlers later, and you can bind more than one.

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

Summary

概括

Basically, there is no significant relationship between delegateand promise, but they're both useful features in modern jQuery.

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