Вызов нескольких функций из onclick

Question

Хорошо, у меня есть фрагмент кода с веб-сайта, содержащего кнопку:

    <button type="button"
            onclick="laser(); $.post('sheepDB.php', { vic: vic, num: numVics });">
    Activate Her Powers!
    </button>

Однако, когда я нажимаю кнопку в первый раз, выполняется первая функция, но если я нажимаю на нее второй раз, выполняются и первая функция И вызов Ajax. Как мне заставить onclick выполнить их последовательно? (laser() определяет значения, отправленные запросом Ajax, поэтому он должен быть последовательным).

Answer 1

Javascript выполняется последовательно. Однако AJAX асинхронный (отсюда и A), что означает, что выполнение Javascript продолжается, пока выполняется запрос AJAX. Если вы активируете свой onclick второй раз до того, как первый AJAX-запрос будет завершен, возможно, что первый AJAX-запрос не будет завершен до второго клика (и, таким образом, похоже, что это происходит только один раз).

Answer 2

Ну, во-первых, я бы не помещал код непосредственно в onClick, просто прикрепил обработчик $(selector).click().независимо от того, что ваш код не будет делать то, что вы пытаетесь сделать ... вам нужно что-то вроде этого в качестве обработчика:

$(selectorForButton).click(
  function(e){
  e.preventDefault(); // dont fire the normal event

  /* youll probably have to rework laser if it depends on `this` referring to the dom element    
   * clicked in this example lets say it returns a hash of vic and num vics...
   */
  var _this = $(this);
  var data = laser(this);
  // check if this is already sending a post request
  if(!_this.data('activated')){
     $.post('sheepDB.php', data, function(){
       // this is important - we need to set it to false so we now on the next click that
       // post innt in the process of doing its thing
        _this.data('activated', false);
     });
  }

  return false;
});

Answer 3

$(document).ready(function () {
   $('#yourButtonId').click(function() {
      // collect your values into a json object
      var someData = {
         x: '',
         y: '',
         z: ''
      };

      //execute post
      $.post('someUrl', someData, function(data, textStatus) {
         // callback
      });
   })
})