CODEWITHSUNDEEP
javascriptcallback
Fat Monk
Fat Monk

Reputation: 2265

JavaScript callback firing out of sequence

I thought I'd finally figured out JavaScript callbacks as I found a use for one, but it is firing out of sequence.

In a Google Maps application I have a function which checks if the map is zoomed to the maximum level before allowing the user to store the (new) location of a marker.

The check function is:

function checkForMaxAccuracy(nextOperation) {

 // Check at full zoom and alert if not
 maxZoomService.getMaxZoomAtLatLng( newLocationMarker.getPosition(), function(response) {
 var levelToZoomTo;
    if (response.status != google.maps.MaxZoomStatus.OK) {
      alert("Please ensure you are at maximum zoom to ensure most accurate placement possible.");
      // continue after this alert as Mao could be fully zoomed but zoom service not reporting correctly
    } else {
      //alert("The maximum zoom at this location is: " + response.zoom);
      if (response.zoom > map.getZoom()) {
        alert("You must be zoomed in to the maximum to ensure most accurate placement possible before saving.\n\n Click [ Zoom here ] in theInfo Window to zoom to the maximum.");
        // return after this error as Mao is definitely not fully zoomed
        return;
      }

      // Call the update function to do the saving to the database
      nextOperation();
    }
  });
}

Where nextOperation is the callback function.

This is called by two different functions, the first, and simplest (because it's not fully written yet) works perfectly:

function saveNewLocation() {
checkForMaxAccuracy(function () {
    alert("save new");
    });
}

If not fully zoomed I get the warning message displayed by the check function. If the map IS fully zoomed I get the alert 'save new' message displayed which is a place holder for the code to do the database update.

However, the same check function is also called from a more complete function. This other function is called when the user is updating the location of an existing marker.

This second function actually sets the onclick property of an HTML span object - effectively enabling and disabling the save control depending on what is going on.

In this function I am setting the onclick as follows:

document.getElementById('savePosition'+locationId).onclick =  (state)?function(){checkForMaxAccuracy(doUpdate(locationId,"position"));}:null;

In this case, when I click the corresponding span element the doUpdate() function gets fired before the checkForMaxAccuracy() function.

(Apologies for the use of ternary operator.. I know if makes things a little difficult to read, but I'm leaving as is in my code in case I've got the bracketing or syntax slightly wrong here and that's what's causing my problems.)

My guess is I'm getting something fundamentally wrong in my 'understanding' of callback functions.

Can anyone explain what I'm doing wrong?

-FM

Upvotes: 0

Views: 83

Answers (1)

sp00m
sp00m

Reputation: 48827

checkForMaxAccuracy(
    doUpdate(locationId,"position")
);

will pass the returned value of doUpdate as an argument of checkForMaxAccuracy. In other words, you're not passing the callback function itself but its return value.

What you could do is:

checkForMaxAccuracy(
    function() {
        doUpdate(locationId,"position")
    }
);

Upvotes: 1

Related Questions