Question

我有一个下拉列表如下。

<select id="mySelect">
<option value="one">one</option>
<option value="two">Two</option>
</select>

我有一个更改事件处理程序，当用户选择两个时会调用它，如下所示。

$('select#mySelect').on('change',function(){

   if(//Two is selected){
      display_message("Processing....<a id='manual'>Try Manually</a>");
      //an ajax call which gets the content from server 
      //if successful display another drop down using the content retrieved from server
      //else 
       display_message("Processing failed...<a id='manual'>Try Manually</a>");
   }else{
     $('div#content').html("<input type='text' name='name' />");
   }

});

此外，我还有另一个点击事件处理程序，当用户点击手动尝试时会调用该处理程序，如下所示。

$('#manual').on('click',function(){     
  $('div#content').html("<input type='text' name='name' />");
});

因此，当用户选择两个时，会显示一条消息 - “正在处理...尝试手动”，然后在成功调用ajax后会显示一个下拉列表。

如果ajax呼叫花了很长时间，那么消息就会停留在屏幕上。在此期间，如果用户点击手动尝试，则在显示文本框之前，我应该取消正在运行的“更改”事件处理程序。

如何实现这一目标？

Answer 1

你可以拥有一个全局变量，这样你可以取消它在屏幕上的事件，如下所示：

var disableEvent = false;

$('select#mySelect').on('change',function(){
   if (disableEvent) return false;

   if(//Two is selected){
      display_message("Processing....<a id='manual'>Try Manually</a>");

      disableEvent = true;

      //an ajax call which gets the content from server 
      //if successful display another drop down using the content retrieved from server
      //else 
       display_message("Processing failed...<a id='manual'>Try Manually</a>");

       disableEvent = false;
   }else{
     $('div#content').html("<input type='text' name='name' />");
   }

});

防止在javascript / jQuery中执行正在运行的事件

1 个答案: