Shulou(Shulou.com)06/01 Report--

This article focuses on "how to prevent the same event from being triggered quickly and repeatedly in jQuery". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to prevent the same event from being triggered repeatedly in jQuery.

Repeated trigger is to prevent users from repeatedly clicking to submit data. We usually click again after clicking. This should not only be done from the user experience, but also be done on the js or php program script to let the user know that the click has been submitted to the server is being processed. I will sort out the problem of repeated trigger from the script below.

In many cases, events are triggered quickly and repeatedly, such as click, so the code is executed twice, with a lot of consequences. There are many solutions, but almost all of them have limitations, such as an Ajax form. If you prevent users from clicking many times at a time, you can freeze the submit button on the first click and release it until you are allowed to click again. A lot of people do this, but it's not very effective in other situations.

A good method is recommended below. First, throw a function into it.

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 id is the only / / response event}, 300);})

The above code allows you to wait 300 milliseconds after clicking, and if this event occurs within 300 milliseconds, the previous click is abolished, rescheduled, and repeated until it has completely waited 300 milliseconds before responding to the event.

This function is useful, such as validating input or pulling the avatar in real time based on the entered mailbox without having to wait until it has to be out of focus.

Examples

Button BUTTON class

A label class

For the first case, an attribute of button is disabled that controls whether it can be clicked or not. Look at the code.

Function myFunc () {/ / code / / after executing a piece of code, you can choose to remove the disabled attribute so that button can be clicked on $("# subBtn") .removeAttr ("disabled") again;} $("# subBtn") .click (function () {/ / prevent button from clicking $(this) .attr ("disabled", "disabled"); / / execute other code, such as myFunc () for submitting events;}) At this point, I believe you have a deeper understanding of "how to prevent the same event from being triggered quickly and repeatedly in jQuery". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.