javascript - 返回用于点击处理程序的 promise

Question

我正在尝试从 AJAX 方法返回 promise ，看看如何使用它们来使我的代码更易于阅读/更易于使用。我目前的方案是使用函数 getBookIds 向数据库发出 AJAX 调用，以根据书的 ID 返回书名。表中有五本书和一个 anchor 标记，其文本属性对应于每本书。我希望在单击所有 anchor 标记后触发一些其他花哨的 AJAX 方法。这是我到目前为止所得到的:

HTML
<a href="#">1</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
<a href="#">7</a>

JS

 //hacky globals
 var bookArray = [];
 bookArray.length = $('a').length;

 //ajax function
 function getBookIds(data) {
     return $.ajax({
         type: "POST",
         url: "Service.asmx/GetBookById",
         data: JSON.stringify({
             'titleId': data
         }),
         dataType: "json",
         contentType: "application/json"
     });
 }
 //click handler
 $('a').on('click', function () {
     var index = $('a').index($(this));
     var titleId = $(this).text();
     getBookIds(titleId).done(function (results) {
         bookArray[index] = results.d;
         var isEmpty = arrayChecker(bookArray);
         fancyAjax(isEmpty);
     });
 });
 //checks for undefined values in the array
 function arrayChecker(array) {
     var isEmpty = 0;
     $.each(array, function (key, val) {
         if (val === undefined) {
             isEmpty++;
         }
     });
     return (isEmpty > 0);
 }
 //bool comes from arrayChecker if no undefined then go AJAX
 function fancyAjax(bool) {
     if (!bool) {
         alert('alert message for fancy stuff');
     }
 }

这是一个人为的例子，但我正在努力了解如何将这些 promise 融入我的日常工作中。首先，这只是一个利用 promises/deferred 的力量的坏例子吗？似乎不是 AJAX 上的 success 回调，而是我在 done 中收集了所有逻辑。关于更好地解决这个问题有什么建议吗？

Answer 1

I want some other fancy AJAX method to fire once all anchor tags have been clicked on.

这听起来像是您希望对每次点击做出 promise ，然后您可以将其组合成对所有点击的 promise 。重点不是使用全局 booksArray，而是一组 promises。

function getBookIds(data) { … } //ajax function as before

var promises = $('a').map(function() {
    var $this = $(this),
        click = $.Deferred();
    $this.one('click', function() { // click handler
        click.resolve($this.text());
    });

    return click.then(getBookIds); // returns a promise for the ajax result
                                   // after the link has been clicked
}).toArray();

$.when.apply($, promises).then(function fancyAjax() {
     alert('alert message for fancy stuff');
});

( Demo )