How do I wait for callback?

Question

I call a function which registers a registrationId is issued using chrome.gcm. Everything is fine but because the callback takes time, my code does not work without a console.log or alert. Any tips how I can make it wait?

 var registrationId = ""

function register() {
  var senderId = 'MY_SENDER_ID';
  chrome.gcm.register([senderId], registerCallback);
}


function registerCallback(regId) {
  registrationId = regId;
  if (chrome.runtime.lastError) {
    return false;
  }
  chrome.storage.local.set({registered: true});
 }


$(function(){
  $("#register-form").submit(function(e) {
    //Disable from further calls
    $('#submit').disabled = true;
    register()
    var name = $('#name').val()
    var email = $('#email').val()
    //Insert console.log or alert here to slow it down
    var chromeId = registrationId

    $.ajax({
         type: "POST",
         url: 'MY_URL',
         ajax:false,
         data: {chromeId: chromeId, name: name, email:email},
         success: function(result)
         {
           console.log(result)
         }
       });
  });
})

Jesse · Answer 1 · 2016-02-17T01:45:42.437

The code that comes after register() should go in a new callback which accepts registrationId as a parameter, and is passed to register(). Then, register() can call this callback with the registrationId it gets back from chrome.gcm.register. No need for the global registrationId variable.

function register(callback) {
  var senderId = 'MY_SENDER_ID';
  chrome.gcm.register([senderId], function (regId) {
      if (chrome.runtime.lastError) {
        return false;
      }
      chrome.storage.local.set({registered: true});
      callback(regId);
  });
}

$(function(){
  $("#register-form").submit(function(e) {
    //Disable from further calls
    $('#submit').disabled = true;
    register(function (registrationId) {
      var name = $('#name').val()
      var email = $('#email').val()
      //Insert console.log or alert here to slow it down
      var chromeId = registrationId

      $.ajax({
           type: "POST",
           url: 'MY_URL',
           ajax:false,
           data: {chromeId: chromeId, name: name, email:email},
           success: function(result)
           {
             console.log(result)
           }
         });
    });
  });
})

Promises and async/await helps with stuff like this, also.

Worked like a charm! I think I finally understood what promises are for! :) I've heard a lot about it but always avoided using it because I didn't get them well. Thanks a lot Jesse! Cheers! — Newbie, Feb 17 '16 at 01:36

Sushanth -- · Accepted Answer · 2016-02-17T01:42:35.913

You need to execute the method as part of the callback, since the value that needs to be passed in as part of your AJAX request, is available only after ASYNC process completes. You can use a Deferred objects in such cases. As soon as the it is resolved you can execute your AJAX call.

$(function() {
  $("#register-form").submit(function(e) {
    //Disable from further calls
    $('#submit').disabled = true;

    var senderId = 'MY_SENDER_ID';
    // Store the promise in a variable
    var complete = chrome.gcm.register([senderId]);

    // When resolved it will, hit the callback
    // where you have access to the value
    // which is then passed to your AJAX request 
    $.when(complete).done(function(regId) {
      var registrationId = regId;
      if (chrome.runtime.lastError) {
        return false;
      }
      chrome.storage.local.set({
        registered: true
      });
      $.ajax({
        type: "POST",
        url: 'MY_URL',
        ajax: false,
        data: {
          chromeId: registrationId,
          name: name,
          email: email
        },
        success: function(result) {
          console.log(result)
        }
      });
    });
  });
});

You should mention that this isn't vanilla javascript (and also not valid jQuery). This appears to either be using `when.js` or you mistyped `$.when()` — thedarklord47, Feb 17 '16 at 01:38
@thedarklord47 Thanks for pointing it out. I mistyped my `$` . Also the OP is already making use of AJAX here. So I thought mentioning that was trivial :) — Sushanth --, Feb 17 '16 at 01:43
^ agreed, hence the confusion at lack of `jQuery.Deferred` syntax haha. upvoted — thedarklord47, Feb 17 '16 at 01:47

How do I wait for callback?

2 Answers2