Description and implementation of throttling and anti shake

Write it at the front

Today, let's talk about

Throttle and prevent shaking

, This is an old concept , There are also many practical applications , I often ask you . But there are still many beginners who don't understand , I don't understand the difference between the two , Or the difference between the concept and practical application of the two （ For example, when I first came into contact, I just couldn't understand these two concepts ）. In fact, when I understand it, I suddenly see the light , Feel very simple . So today, let's talk about throttling and anti shake , Try to talk it over again .

Anti shake

* Anti shake story

Xiaoxiong goes to play with Xiaohu in the morning , At the door of Xiaohu's house , Little bear is going to ring the doorbell all the time to wake up little tiger , So bear kept ringing the doorbell , But the doorbell didn't ring once . Little bear thought the doorbell was broken , So stop ringing the doorbell , After a while, the doorbell rang . Xiaohu is in the room, hehe, laughing ： My doorbell did

Shake proof

Operation yo , Keep pressing until the last time .

* Anti shake logic diagram

* Anti shake code implementation

The implementation of function anti shake code is generally based on

setTimeout

To achieve . Every time I enter, I will execute

setTimeout

, But if there is already

setTimeout

In execution , The executed will be destroyed first

setTimeout

, Create a new one

setTimeout

. Make sure there is only one

setTimeout

And execute after the specified time .

After scrolling 3s Take the post trigger processing function as an example ：

 //  Anti shake initial variable
 let debouncTtimeout
 //  Click the anti shake button to trigger the function
 function debounce() {
 clearTimeout(debouncTtimeout)
 debouncTtimeout = setTimeout(function () {
 console.log(" Perform anti shake operation ~")
 }, 3000)
 }


Throttling

* Throttling story

The next day, Xiaohu went to play with Xiaoxiong , At the door of little bear's house , Xiaohu is also ready to keep ringing the doorbell to wake up Xiaoxiong , But the doorbell only “ Ding Ding ~” It rang once , It doesn't ring anymore , Xiaohu keeps pressing , Press for a long time , The doorbell rang again , It doesn't ring anymore . Little bear is in the room, hehe, laughing ： My doorbell did

throttle

Operation yo ~

* Throttling logic diagram

* Throttling code implementation

The implementation idea of function throttling is ： Set an initial time and a fixed time , It will only be triggered once in a fixed time . Before triggering the function, compare whether the initial time interval is greater than the fixed time , If the time interval between two starting functions is greater than a fixed time , Will trigger the function , The initial time after triggering is changed to the time when the function is triggered . Implementation methods can use timestamp and timer , Understand the idea , The methods are similar .

In a rolling process every 3s Trigger a handler （ Timestamp method ） For example ：

 //  Throttling initial timestamp
 let pastDate = new Date().valueOf()
 //  Click the throttle button to trigger the function
 function throttle() {
 let nowDate = new Date().valueOf()
 if (nowDate - pastDate > 3000) {
 console.log(' Perform throttling operation ~')
 pastDate = new Date().valueOf()
 }
 }


summary

Function anti shake ：

  Continuous clicking only triggers the function for the last time . For example, the user scrolls the page to select points , When the user stops scrolling, it needs to trigger .

Function throttling ：

  The function is triggered only once in a certain time . For example, the form submit button , Users may click many times , Cause multiple sending of data , We need to let users every 3s All clicks in the only take effect once .

Written in the back

The example of throttling and anti shake shows that I have been thinking for a long time , Finally came up with a suitable example . I try to write the content as simple and easy to understand , The code is short , Even Xiaobai won't have any obstacles in reading . Also welcome the gods to put forward more ways and various operations about throttling and anti shake in the comment area ~