• notice
  • Congratulations on the launch of the Sought Tech site

Is there any good way to avoid frequent triggering of JS events when users click

For example, keep clicking "next page", keep clicking "last 1 hour", keep clicking "ascending and descending".
I hope that the user will only trigger once after clicking, and then wait until the Ajax request is over, or allow another click after a period of time.

Of course, I have seen the methods being used in some projects

  • Click the button, the button becomes disabled

  • Set a JS global variable, every time a method is adjusted, it will check the interval with the last time the method was run

  • Trigger a screen mask, the user's click is blocked by the transparent DIV wall

I don't want to write special cases for every place that needs to be used, because there is too much business code.
Are there any ready-made...design patterns? Or what method


Give the button an event onClick, you can use async and await to cooperate, and wait for the completion of the request, that is, the execution of the event bound to onClick, before clicking again. This allows the code to be shared and prevents multiple clicks from triggering.

E.g:
image.png

How to use:
image.png


"Anti-shake and throttling", a common problem, is also a high-frequency interview question.The big guys on the principle have already talked about it.Call it once in a short time, but try to write, setTimeout or set the switch.


My current approach is to encapsulate ajax or axios, and then add loading.
In this way, loading will pop up before each request, and loading disappears when the request callback comes back.
Pseudo code, taking axios as an example

//Request interceptor service.interceptors.request.use(
   config => {
     showLoading()
     return config
   },
   error => {
     hideLoading()
     return Promise.reject(error)
   })//Response interceptor service.interceptors.response.use( response => {
     hideLoading()
     return response
   },
   error => {
     hideLoading()
     return Promise.reject(error)
   })



Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

author

order atorvastatin 10mg without preion & lt;a href="https://lipiws.top/"& gt;cost atorvastatin 10mg& lt;/a& gt; buy lipitor 40mg online cheap

Jmtoxs

2024-03-09

Leave a Reply

+