Cannot break recursion with $.Deffered() object an

Question

I have to search through word index tables with potentially hundreds of thousands rows. I can restrict my search by passing a list of documents to the search. Request to search for words in many documents return very slowly. So...to improve the UX we're chunking the request into several groups of documents. So, if a user asks to search 90 documents, and the chunk size is 10 documents per query, then we send out 90 / 10 = 9 independent $.ajax() calls. We want the results to come in the order they were sent.

We implement this recursion:

var SearchFunction = function () {
   $.ajax(/* ... */);
   }

var RecursiveSearch = function () {
   var deferred = $.Deferred();
   if (arrTransSearch.length > 0) {
      deferred = SearchDocuments(arrTransSearch.shift());
   }
   else {
      deferred.reject();
   }

   return deferred.promise().then(RecursiveSearch);
}

if (arrTransSearch.length > 1) {
   RecursiveSearch().fail(SomeFunction);
}

var SomeFunction = function () {
   alert("Failed. Yes!");
}

When I debug the code, it appears that deferred.reject() does not change the state of deferred.promise(). That is, when the next line

return deferred.promise().then(RecursiveSearch)

is executed, it just loops back into the recursive function, instead of exiting the recursion and falling into

RecursiveSearch().fail(SomeFunction);

Important Note:

I'm using jQuery-1.7.1. I ran analogous recursion in JSFiddle (Thank you Beeetroot-Beetroot) and it failed on jQuery-1.7.2 while on jQuery-2.1.0 it ran without a problem.

Any idea on how to get the recursion to work in jQuery-1.7.1?

Answer 1

A pattern partly covering what you are looking for is provided here under the heading "The Collection Kerfuffle". You actually need slightly more than that because you want to address your list of document referneces in chunks (groups).

The code will be something like this :

$(function() {

    //General ajax options for searching a document group
    var ajaxOptions = {
        url: '...',
        type: 'POST',
        //data: ... //added dynamically 
        dataType: 'JSON',
        // etc.
    };

    //
    function searchDocumentsInGroups(arr, n) {
        //Pre-process arr to create an array of arrays, where each inner array is a group of document references
        var groups = [];
        $.each(arr, function (i) {
            if (!(i % n)) groups.push(arr.slice(i, i + n));
        });

        //Ajax serializer (from the Collection Kerfuffle reference)
        return groups.reduce(function (promise, group) {
            return promise.then(function () {
                return $.ajax($.extend({}, ajaxOptions, {
                    data: JSON.stringify(group);//or whatever, compatible with the server-side script
                })).then(function (groupResults) {
                    //display groupResults here
                });
            });
        }, $.when(0));
    }

    // data
    var myDocumentArray = [ 'doc1', 'doc2', 'doc3', 'doc4', 'etc.' ], //Your array of 90 document references.
        groupSize = 10; //Number of documents per "chunk".

    // Event handler to kick off the process.
    $("#searchDocuments").on('click', function () {
        // display "in progress" message or spinner here
        searchDocumentsInGroups(myDocumentArray, groupSize).then(function () {
            // display "complete" message or hide spinner here
        });
    });
});

You also need the Polyfill for Array.prototype.reduce, as .reduce is relied on above and older browsers (pre ECMAScript5) don't have it.

if ( 'function' !== typeof Array.prototype.reduce ) {
  Array.prototype.reduce = function( callback /*, initialValue*/ ) {
    'use strict';
    if ( null === this || 'undefined' === typeof this ) {
      throw new TypeError(
         'Array.prototype.reduce called on null or undefined' );
    }
    if ( 'function' !== typeof callback ) {
      throw new TypeError( callback + ' is not a function' );
    }
    var t = Object( this ), len = t.length >>> 0, k = 0, value;
    if ( arguments.length >= 2 ) {
      value = arguments[1];
    } else {
      while ( k < len && ! k in t ) k++; 
      if ( k >= len )
        throw new TypeError('Reduce of empty array with no initial value');
      value = t[ k++ ];
    }
    for ( ; k < len ; k++ ) {
      if ( k in t ) {
         value = callback( value, t[k], k, t );
      }
    }
    return value;
  };
}

All untested but I recently answered a similar question here, with a link to a fiddle.

Answer 2

It turns out that until jQuery-1.8, calling $.then() with one argument was the equivalent of calling $.then(successFunction, successFunction). Since I was using jQuery-1.7.1, a rejected promise would still invoke the recursion.