0

I have a function that is called if a certain id is going to be visible. This function calls a jQuery AJAX call that i have async set to false on. I get the deprecated warning in my console log so that tells me it's a sync call. I pass back the callback function but it's not waiting for my callback to finish before it runs the console log in the example below. Ideas as to why my function that calls the sync call is being ran asynchronously? I unfortunately can't use any ES6 or ES7 methods in my code. 

if (fsReturned[0].id === 'the-id') {

  // sync call with callback
  keyCheck('key', function (resObj) {

    console.log('precheck active key = ' + resObj.activeKey);
    if (elResponse.activeKey === '1') {
      fsReturned = $('#id');
    } else {
      fsReturned = $('#id').next();
    }

  });

  console.log('This runs before my callback function finishes');
}


function sendSyncRequest(requestData, url, successFunction, authKey, method) {

  header = {
    "Authorization": "Bearer " + authKey,
    "Content-Type": "application/json"
}

  requestParameters = {
    url: url,
    method: method,
    crossDomain: true,
    headers: header,
    async: false,
    data: JSON.stringify(requestData)
  }
  $.ajax(requestParameters).then(
    function (response, statusText, xhr) {

      // successful calls
      successFunction(response);
    },
    function (xhr) {

      // api failures
      successFunction(null);
    });
}

function keyCheck(elValue, callback) {
  var url = 'url',
    stageKey = 'key',
    requestData = {
      activity: 'something',
      el: elValue
    };


  successFunction = function (response) {

    // processed response and created elResObj object

    var processed = JSON.parse(response);

    var elResObj = {
      activeKey: processed.activeKey,
    };
    return callback(elResObj);

  };
  sendSyncRequest(requestData, url, successFunction, stageKey, 'POST');

};

I need to update a global variable "fsReturned" with the data I get from the sync call before proceeding with the rest of the code.

Any assistance is greatly appreciated. Thanks!

Jay
  • 155
  • 1
  • 13
  • Can you show the ajax call also, what version of jquery are you using? – basic Jan 07 '19 at 21:47
  • Why do you use a callback instead of just returning the value if `keyCheck` is synchronous? – Bergi Jan 07 '19 at 21:55
  • Added code for keyCheck. – Jay Jan 07 '19 at 21:58
  • 3
    Possible duplicate of [jQuery: Performing synchronous AJAX requests](https://stackoverflow.com/questions/6685249/jquery-performing-synchronous-ajax-requests) – Herohtar Jan 07 '19 at 22:01
  • @Bergi I mainly just need to get the object back from the sync call to that if block. – Jay Jan 07 '19 at 22:01
  • @Jay Well yes, if you really want to make synchronous requests then don't use promises and don't use callbacks. Look into what `$.ajax` returns when using the sync option and work with that. Or just do it properly in asynchronous fashion, `async`/`await` syntax can make even if conditions a breeze. – Bergi Jan 07 '19 at 22:05
  • don't think browsers allow that - chome says something about running sync calls on main thread is deperecated – David Bray Jan 07 '19 at 22:21
  • 1
    The problem is that you're using `.then` which is part of asynchronous Promises. See the linked duplicate. – Herohtar Jan 07 '19 at 22:29
  • Thanks all for your help. I ended up using a vanilla XMLHttpRequest request that I tried to use previously but happened to be parsing incorrectly. Once I fixed that I was able to process the request fully synchronously and not need the sync ajax call. – Jay Jan 08 '19 at 06:01

0 Answers0