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

This article mainly talks about "the distinction and implementation of JS throttling and anti-shaking". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the distinction and realization of JS throttling and anti-shaking".

Throttling concept (Throttle)

Execute the function at a fixed time, such as 200ms once. Note: fixed is that you execute this throttle function during the mousemove process. It must be executed once within the 200ms (timer delay time you set). If it does not reach the 200ms, it will be returned. No callback function will be executed.

The main application scenarios are: scroll, touchmove

Anti-shake concept (Debounce)

The function is executed once when the time after the jitter stops exceeds the set time. Note: the jitter stop here means that you have stopped triggering the function, and the callback function will be executed only when the interval is equal to the time you set. If you keep triggering this function and the interval between two triggers is less than the set time, you will never get to the callback function.

The main application scenarios are: input verification, search association, resize

Throttling realization

Idea: the first time you set a variable true, the second time you execute this function, you will determine whether the variable is true or not. When the first timer finishes executing the function, the variable is finally set to flase. Then the next time the variable is judged, it will be flase, and the function will run in turn.

Code 1: do not execute for the first time

Function throttle (fn,delay=100) {

/ / first set a variable to null when our timer is not executed

Let timer = null

Return function () {

/ / when we find that this timer exists, it means that the timer is already running and needs to be returned

If (timer) return

Timer = setTimeout () = > {

Fn.apply (this,arguments)

Timer = null

}, delay)

}

}

Code 2: first execution

Function throttle2 (fn,delay=100) {

Let last = 0

Return function () {

Let curr = + new Date ()

If (curr-last > delay) {

Fn.apply (this,arguments)

Last = curr

}

}

}

Anti-shaking realization

Idea: the first time to run the timer assigned to a variable, the second execution, if the interval does not exceed the time set by the timer will clear the timer, reset the timer, repeatedly, when we stop, did not execute the clear timer, after a certain period of time to trigger the callback function.

Code 1: do not execute for the first time

Function debounce (fn,delay=200) {

Let timer = null

Return function () {

If (timer) clearTimeout (timer)

Timer = setTimeout () = > {

Fn.apply (this,arguments)

Timer = null

}, delay)

}

}

Code 2: first execution

/ / code from http://caibaojian.com/throttle-debounce.htmlfunction debounce2 (fn, delay = 200, atBegin = true) {

Let timer = null, last = 0J

Return function () {

Let self = this, args = arguments

Var exec = function () {

Fn.apply (self, args)

}

If (atBegin & &! timer) {

Exec ()

AtBegin = false

} else {

During = Date.now ()-last

If (during > delay) {

Exec ()

} else {

If (timer) clearTimeout (timer)

Timer = setTimeout (function () {

Exec ()

}, delay)

}

}

Last = Date.now ()

}

}

At this point, I believe you have a deeper understanding of "the distinction and realization of JS throttling and anti-shaking". 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.