Success handling in custom javascript function

13,522

How to use Deferreds:

function somethingAsynchronous() {
    var deferred = new $.Deferred();
    // now, delay the resolution of the deferred:
    setTimeout(function() {
        deferred.resolve('foobar');
    }, 2000);
    return deferred.promise();
}

somethingAsynchronous().then(function(result) {
    // result is "foobar", as provided by deferred.resolve() in somethingAsynchronous()
    alert('after somethingAsynchronous(): ' + result);
});

// or, you can also use $.when() to wait on multiple deferreds:
$.when(somethingAsynchronous(), $.ajax({ something })).then(function() {
    alert('after BOTH somethingAsynchronous() and $.ajax()');
});

If your functions simply make an AJAX request, you can just return the actual promise returned by $.ajax():

function doAjax() {
    return $.ajax({ /* ajax options */ });
}

doAjax().then(function() {
    alert('after doAjax()');
});
Share:
13,522
davids
Author by

davids

I am in sales and code for fun on the side

Updated on June 18, 2022

Comments

  • davids
    davids almost 2 years

    If I make an ajax call, I can add success handling. I want to add similar logic to my custom functions.

    I have 6-10 custom functions that MUST be run sequentially or independently. They don't typically run independently so I have them daisy-chained now by calling the next function at the end of the previous but that is messy to read and does not allow for separate execution.

    I would love to have something like this:

    function runall(){
        runfirst().success(
            runsecond().success(
                runthird()
        ))
    } 
    

    I have had other situations were I would like to add .success() handling to a custom function, but this situation made it more important.

    If there is another way to force 6-10 functions to run synchronously, that could solve this problem, but I would also like to know how to add success handling to my custom functions.

    I tried the following based on @lanzz's suggestion:

    I added .then() to my function(s):

    $bomImport.updateGridRow(rowId).then(function () {
            $bomImport.toggleSubGrid(rowId, false);
    });
    
    
    var $bomImport = {
      updateGridRow: function (rowId) {
        $('#' + rowId + ' td[aria-describedby="bomImport_rev"]').html($("#mxRevTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_itemno"]').html($("#itemNoTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_used"]').html($("#usedTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_partSource"]').html($("#partSourceTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_partClass"]').html($("#partClassTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_partType"]').html($("#partTypeTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_partno"]').html($("#mxPnTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_descript"]').html($("#descTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_qty"]').html($("#qtyTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_custPartNo"]').html($("#custPartNoTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_crev"]').html($("#custRevTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_u_of_m"]').html($("#uomTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_warehouse"]').html($("#warehouseTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_standardCost"]').html($("#stdCostTxt").val());
        $('#' + rowId + ' td[aria-describedby="bomImport_workCenter"]').html($("#wcTxt").val());
        var defferred = new $.Deferred();
        return defferred.promise();
    }};
    

    The code correctly goes to the end of updateGridRow, gives no errors, but never gets back to call the second function.

    I also tried the following as was suggested @Anand:

    workSheetSaveExit(rowId, isNew).save().updateRow().toggle();
    function workSheetSaveExit(){
        this.queue = new Queue;
        var self = this;
        self.queue.flush(this);
    }
    workSheetSaveExit.prototype = {
      save: function () {
        this.queue.add(function (self) {
            $bomImport.workSheetSave(rowId, isNew);
        });
        return this;
      },
      updateRow: function () {
        this.queue.add(function (self) {
            $bomImport.updateGridRow(rowId);
        });
        return this;
      },
      toggle: function () {
        this.queue.add(function (self) {
            $bomImport.toggleSubGrid(rowId, false);
        });
        return this;
      }
    };
    

    Which didn't work.

    Final Solution
    For a great explanation of how to use deferred and make this work see here: Using Deferred in jQuery