javascript - 让 ajax 只调用一次

Question

我有一个 ajax 调用被多次触发。

我使用了e.stopImmediatePropagation()和return false来防止它多次触发。是否有另一种可靠的方法来防止 ajax 多次调用。

$(document).on('click', '#button1', function(e){
$.ajax({
    url: 'http://www.page.com',
    data: data,
    method: 'POST',
    success: function(data){

   },
   error: function(err){

   }
});
  e.stopImmediatePropagation();
  return false;
});

Answer 1

您可以使用 jQuery .one()

  $(document).one('click', '#button1', function(e){
    $.ajax({
        url: 'http://www.page.com',
        data: data,
        method: 'POST',
        success: function(data){

        },
        error: function(err){

        }
    });
  });

var n = null;
$(document).one('click', '#button1', function(e){
$.ajax({
    url: 'https://gist.githubusercontent.com/anonymous/9a6997f09de9b68c59b2/raw/f7d7b756005ad6d2b88cf0211f78a2990d7d2dc7/content.json',
    data: {},
    method: 'HEAD',
    success: function(data, textStatus, jqxhr) {
      console.log(jqxhr.getAllResponseHeaders())
      $("body").append("<br>textStatus: " + textStatus + "<br>count: " + ++n)
   },
   error: function(err){

   }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">click</button>