javascript is executed only with a breakpoint

I have a really weird problem with JS and jQuery.

$('#skip').click(function(e) {
   savePhoto('skip');
   showNextPlace();
   photo_changed = 0;
   return false;
});

showNextPlace() and photo_changed = 0; are only executed when I add a breakpoint. The code of savePhoto(); is very basic. I submit a request depending on the status and the number of elements in the places array.

function savePhoto( status )
  {
      if ( places.length <= 5 )
      {
          // load more places
          $('#loadmore').val('1');
      }

      // Don't send a request on skip unless we need more places
      if ( status != 'skip' || $('#loadmore').val() == 1 )
      {
          $.ajax({
              url: "url" + status,
              cache: false,
              data: $('#form_photo').serialize(),
              success: function(results){
                  // dont load more places until we have few
                  $('#loadmore').val('0');

                  if ( results != '[]' )
    开发者_运维知识库              {
                      for ( var i in results )
                      {
                          places.push( results[i] );
                      }
                  }
              }
          });
      }
  }

Any idea on why this happens or how can I debug better the problem?

---

The async XHR call

$.ajax({ ... })

is probably arriving while the breakpoint is there, but when not run with a breakpoint, the XHR request is still in-flight when that code is reached.

Maybe you should have a callback for the $.ajax call that shows the next place after the places have loaded.

You could have the $.ajax handler call showNextPlace if a boolean needsToShowNextPlace is true, and have showNextPlace set that boolean if it is called when there are no next places to show.

---

As the $.ajax call is asynchronous, you should put your code in the success handler like this:

success: function(results){
  // dont load more places until we have few
  $('#loadmore').val('0');
  if ( results != '[]' )
  {
      for ( var i in results )
      {
          places.push( results[i] );
      }
  }
   showNextPlace(); //Moved here
   photo_changed = 0; //Moved here  
}

So your click bind would be:

$('#skip').click(function(e) {
   savePhoto('skip');
   return false;
});

It wasn't working because, in your original code, showNextPlace() and photo_changed=0 were executing before savePhoto('skip') finished its execution. (thats asynchronous). It worked with breakpoint, because it gave savePhoto() enough time to finish.

Hope this helps. Cheers

---

The problem wasn't related to the AJAX call. In another part of the code, I was binding an event to the image field each time the user pressed the save button (so the second time the code was being executes 2 times, the 3rd 3, etc..) Remember to unbind!

Also, some part of the crop & save plugin was being executed even if I clicked on skip, so I have added some control variables.

Solution: console.log() on every path that the logic can go.