JQuery prevents repeated triggering methods for the same event.

JQuery prevents repeated triggering methods for the same event.

Repeated triggering is to prevent users from repeatedly clicking and submitting data. We usually click again after clicking. This should not only be done from the user experience, the js or php script is still required, so that the user can know that the server has submitted the click request for processing. Now I will sort out the script to handle the repeated triggering problem.

In many cases, events are quickly repeatedly triggered, such as click. This will execute the code twice, causing many consequences. There are many solutions, but almost all of them have limitations. For example, if an Ajax form prevents users from freezing the submit button when they click it for the first time, it is allowed to be clicked again. Many people do this, but it is not very effective in other cases.

A good method is recommended below. First, drop a function.

var _timer = {}; function delay_till_last(id, fn, wait) {  if (_timer[id]) {   window.clearTimeout(_timer[id]);   delete _timer[id];  }   return _timer[id] = window.setTimeout(function() {   fn();   delete _timer[id];  }, wait); } 

Usage

$ Dom. on ('click', function () {delay_till_last ('id', function () {// note that the id is unique // RESPONSE event}, 300 );});

The code above allows you to wait for 300 milliseconds after a click. If this event occurs again within 300 milliseconds, the last click will be abolished, and the timer will be re-executed, wait for 300 milliseconds until the system responds to the event.

This function is very useful, for example, to verify the input or pull the Avatar in real time based on the input mailbox, instead of waiting until it has to be deprecated.

Example

BUTTON class

A label class

In the first case, the button has a property of disabled to control whether it can be clicked and check the code.

<Input type = "button" value = "Click" id = "subBtn"/> <script type = "text/javascript"> function myFunc () {// code // After executing a code segment, you can choose to remove the disabled attribute so that the button can be clicked again $ ("# subBtn "). removeAttr ("disabled") ;}$ ("# subBtn "). click (function () {// make the button unable to click $ (this) again ). attr ("disabled", "disabled"); // execute other code, such as submitting events and other myFunc () ;}); </script>

The above jQuery method to prevent repeated triggering of the same event is to share all the content with you. I hope to give you a reference, and I hope you can provide more support for the customer's house.