Question

鉴于我的下面的代码有没有办法，当我的ajax进程仍在进行中时，我可以获得警报？因为您已经注意到警报的代码将永远不会被执行，因为async ajax将继续发生但是click false的值将在此之前出现，并且我将永远无法在ajax调用期间获得警报。当ajax请求仍在进行中时，有什么方法可以获得警报吗？

<html>
    <body>
    <button type="button" id="submit-catalog" class="btn btn-primary">Activate</button>
    </body>
    </html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var clicked = false;
    $(document).on('click', '#submit-catalog', function() {
        clicked = true;
        //doing some ajax call which is taking time
    });
    if(clicked){ // never get executed
        alert("button clicked")
        //i am executing some function only if that button clicked
    }
});
</script>

Answer 1

这不是关于Ajax。代码从上到下执行，您在文档上声明了事件侦听器并等待操作，而您的'if'语句已经处理完毕。

此“警报”或任何其他操作应在事件监听器

内完成

此外，如果您想在执行ajax请求之前执行任何操作，只需使用beforeSend: ()=>{/*your actions*/}，然后在完成ajax请求后success: callback=>{/*do when done*/} 可能看起来像这样：

$.ajax({
  url: url,
  method: 'POST',
  beforeSend: ()=> { alert('clicked') },
  success: callback=> { console.log(callback) }
})

Answer 2

你的逻辑是关闭的;这是如何做到这一点：

var clicked;
$(document).ready(function() {
  $(document).on('click', '#submit-catalog', function() {
    if (clicked) {
      console.log("ajax still in progress");
      return false;
    }
    clicked = true;
    console.log("starting ajax");
    setTimeout(function () {
      clicked = false;
      console.log("ajax done");
    }, 3000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="submit-catalog" class="btn btn-primary">Activate</button>

我不确定这是否是您正在寻找的，但这将阻止ajax根据跟踪ajax进度的变量一次又一次地触发。

Answer 3

只有在其他地方不使用one()变量时，您也可以使用on()代替clicked。您只为一个触发器附加事件。在回调结束时，你重新连接它。

$(document).ready(function() {

  function foo(e){
    setTimeout(function () {
      console.log("ajax done");
      $(e.delegateTarget).one('click', '#submit-catalog', foo)
    },1000)
  }

  $(document).one('click', '#submit-catalog', foo);
});

其他解决方案：通过委托事件

添加类以停止传播

$(document).ready(function() {
   $(document)
     .on('click', '#submit-catalog.prevent', function(e){
       e.stopImmediatePropagation();
     }
     .on('click', '#submit-catalog', function(){
       $(e.currentTarget).addClass('prevent');
       setTimeout(function () {
         console.log("ajax done");
         $(e.currentTarget).removeClass('prevent');
       }, 1000)
   });
});

在ajax正在进行期间执行我的代码

3 个答案: