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），这意味着在AJAX请求发生时Javascript执行仍在继续。如果在第一次AJAX请求完成之前第二次触发onclick，则第二次单击之前第一次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
      });
   })
})

从onclick调用多个函数

3 个答案: