See a button on the page do you have the urge to click crazy? Please be kind to our front-end development, do not easily click the button on the page multiple times (kidding ~

In the process of web development, it is necessary to put “locks” on certain buttons or hot spots that are frequently triggered, in order to protect our trust of users. In this case, the lock means that the button cannot be clicked more than once.

First of all, it’s worth saying something about repeated clicks

Where does it lead? Take a common chestnut:

The purchase button in the product details page, if there is no corresponding restriction on the user’s clicking behavior, may have the following results

  • A user may place multiple orders and generate multiple orders
  • Too many clicks maxed out the single interface
  • There may also be unknown experiential problems
  • .

This is just one of the scenarios that involves user clicks. Imagine a complex form page with many clickable items, and if you don’t limit clicks at the global level, the impact on the entire page will be immeasurable.

So, how do you lock it?

The core is simple — register the lock before calling or executing the method, check the next time the method is called to see if the lock is released, and run as usual if it is released, otherwise the method will not execute further.

Let’s look at the code to see how this lock should be implemented

First of all, we define some basic variables of the global lock. In order to facilitate the restoration of the lock state, defalutLockOption is defined at the beginning, which is the default data of the global lock method. Next is lockOption, where the data required for the lock operation is obtained or modified. ReloadOption is the method to recover the lock state, and the specific variable meanings are shown in the figure.

Above is the core function of the global lock, of course, is “lock” this operation. It takes two parameters — whether the lock is automatically released and when it is automatically released. However, you will notice that WHEN setting the release time, I still write 10000ms, so as to avoid some cases that the page cannot be clicked due to the failure to manually cancel the lock.

If the endTime of lockOption has a value and the lock release time has passed, the current lock state is locked. We consider the lock to be “releasable” or “released” if a series of conditions are met. So when you call lock(), you reset the lock configuration and set _lockStatus = false (indicating that the call is not locked and you can continue).

Following the next judgment condition, _lockStatus actually refers to the actual status of the global lock when lock() is called. If the lock is in the release state when lock() is called, the lock state will be changed and the release time will be set. Then return _lockStatus Note that this is not return lockoption. lockStatus.

It might be a bit confusing just to look at the text, but I’ve put together a diagram that shows the entire process of unlocking-locking-releasing the lock:

How do I use it?

The above is just one scenario, but virtually all clickable areas can be triggered with this mode. Click direct demo, source code and implementation effect can be seen intuitively ~ if around can be matched with the previous analysis to see.