Returning Promises für die Verwendung in Click-Handlern

Question

Ich spiele herum mit Versprechen von einer AJAX-Methode und sehen, wie ich sie verwenden kann, um meinen Code einfacher zu lesen/funktional. Mein aktuelles Szenario ist eine Funktion getBookIds, die einen AJAX-Aufruf an eine Datenbank ausgibt, um den Titel eines Buches basierend auf seiner ID zurückzugeben. Es gibt fünf Bücher in der Tabelle und ein Anker-Tag, dessen Texteigenschaften jedem Buch entsprechen. Ich möchte, dass eine andere fantastische AJAX-Methode ausgelöst wird, nachdem alle Anker-Tags angeklickt wurden. Hier ist, was ich bisher habe:

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'); 
    } 
} 

Dies ist ein konstruiertes Beispiel, aber ich bin zu kämpfen, um zu sehen, wie ich diese Versprechen in meine tägliche Arbeit integrieren können. Ist das nur ein schlechtes Beispiel dafür, die Macht von Versprechen/Aufschubs zu nutzen? Es scheint, dass anstelle der success Rückruf auf AJAX, nicht habe ich meine ganze Logik aufgerollt innerhalb done. Irgendwelche Vorschläge, um das besser in Angriff zu nehmen?

Answer 1

Ich möchte eine andere ausgefallene AJAX-Methode auslösen, nachdem alle Anker-Tags angeklickt wurden.

Das klingt, als ob Sie ein Versprechen für jeden Klick erhalten möchten, den Sie dann zu einem Versprechen für alle Klicks kombinieren können. Der Punkt ist nicht, eine globale booksArray, sondern eine Reihe von Versprechen zu verwenden.

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)