jquery ajax调用多次运行

Question

当我多次点击我的生成卡片按钮时出现问题（它会在每次点击时随机生成一组新卡片）然后点击我的任何按钮排序将运行多个ajax调用，而不仅仅是最新生成的数组。它将传递不仅仅是最新版本生成的每一组卡片，有点像是在保持队列。

控制台日志将输出，"sending color sort", "sending color sort", "sending color sort",等。*多次点击我的generate_cards *按钮

我怎样才能拥有它，因此sort函数只运行一次。

<input type="button" value="Generate Cards" id="generate_cards"> </input>
<input type="button" class="sorter" value="Color Sort" id="color_sort"> </input>
<input type="button" class="sorter" value="Shape Sort" id="shape_sort"> </input>

生成卡片：

 $('#generate_cards').click(function() {
          $.ajax({
          url: ''+set,
          async: false,
          type: 'POST',
          dataType: 'html',
          success: function(data) {
          var obj = JSON.parse(data);
         //sent array to sorting function :
          sorting(obj);
          var tmpl = $("#formInfo_tmpl").html();
          var html = Mustache.to_html(tmpl, obj);
          pool_window.html(html);
          initilizejs();

          },
          error:function(jqXHR, textStatus, errorThrown){
          alert("Error type" + textStatus + "occured, with value " + errorThrown);
                                   }
          });

卡片分类功能

function sorting(cards) {

$('.sorter').on("click", function() {
var cards_window = $("#sealed_pool");
var sort_type = $(this).attr('id');
//just give me the first word:
sort_type = sort_type.replace(/(\w+).*/,"$1");

console.log('sending'+sort_type);

      $.ajax({
      url: '',
      async: false,
      type: 'POST',
      data: ({'cards':cards, 'sort_type':sort_type}),
      dataType: 'html',
      success: function(data) {
         var obj = JSON.parse(data);
        if(sort_type =='color_sort')
              {
        var tmpl = $("#color_sort_tmpl").html();
              }
         if(sort_type =='shape_sort')
              {
        var tmpl = $("#formInfo_tmpl").html();
              }
            var html = Mustache.to_html(tmpl, obj);
            cards_window.html(html);
        initilizejs();

      },
               error:function(jqXHR, textStatus, errorThrown){
                                   alert("Error type" + textStatus + "occured, with value " + errorThrown);
                               }
      });

});

}

Answer 1

在添加新内容之前删除之前的点击侦听器：

$('.sorter')
  .off("click")
  .on("click", function() {
    //code
  });

Answer 2

您需要在文档就绪函数中使用setInterval，如下所示： $（document）.ready（function（）{setInterval（doAjax，5000）;}）;