Question

我有一个锚和一个div。锚点用于通过ajax加载内容并将其附加到div上。实际上，整个系统都适用于分页。锚的属性保存页码，并根据div中加载的页面进行更改。

问题是，多次连续点击锚点会产生多次ajax调用和灾难。如何阻止锚点成为一个onclik事件监听器，直到一个ajax调用完全执行？

感谢您的帮助。

修改我的onclick监听器看起来像：

$('a.left_array_trigger').click(function(e){
        e.preventDefault();    
        var this_this= $(this);
        var idf=parseInt($(this).attr("id"),10);
        var current= idf -2;
        var followed_id=$(this).parent().parent().attr("id");

        load_articles(followed_id,current+1);// ajax call

        $(this).attr("id",current+3);
        $(this).parent().next().next().children().attr("id",current+1);

        var maxi= current +2;
        var mini= current -2;

        $.when(get_number_of_posts(refresh_left_arrow,followed_id)).done(function(){
          if(maxi===this_number_of_pages)  this_this.css('display', 'none');
          else this_this.css('display', 'block');
        });

        if(mini!==0) $(this).parent().next().next().children().css('display', 'block' );

        return false;
   });

Answer 1

有几种方法可以做到这一点，但切换听众可能会很痛苦。只需使用旗帜。

var pDiscard = false;

$('#foo').on('click', function(){
   if (pDiscard) return; // prevent multiple clicks.
   pDiscard = true; // temporarily ignore.
   $.ajax('/foo/bar/').always(function(){
      pDiscard = false; // unignore.
   });
});

Answer 2

要避免变量，您可以执行以下操作：

$('#foo').on('click', function(){

   // The anchor is locked, return
   if ($(this).data('locked')) 
      return;

   // Let's lock the anchor
   $(this).data('locked', true);

   $.ajax('/foo/bar/').always($.proxy(function(){

      // Unlock the anchor
      $(this).removeData('locked');

      // Do whatever you need to do here <3

   }, this));
});

Answer 3

使用特定数据锚点击：

$('a.left_array_trigger').click(function (e) {
    var this_this = $(this);
    if (this_this.data('unclickable')) return;
    this_this.data('unclickable', true);
    e.preventDefault();
    //...
    $.when(get_number_of_posts(refresh_left_arrow, followed_id)).done(function () {
        if (maxi === this_number_of_pages) this_this.hide();
        else this_this.show();
    }).always(function () {
        this_this.data('unclickable', false);
    });
    //...
});

但您应该为this_this找到更好的变量名称，例如$this或$self

完成一次单击后，停止onclick事件侦听器以执行所有操作

3 个答案: