Moment For Technology

Anti-shake and throttling

Posted on Sept. 23, 2022, 3:35 p.m. by Lindsay Benson
Category: The front end Tag: The front end

I. Debounce

The callback is executed n seconds after the event is triggered, and if it is triggered again within n seconds, the timer is reset.Copy the code

In simple terms, stabilization is how you have a click event, and if the stabilization interval is 2s, then once you click on it, you have to click on it for 2s before the second click works, and every click within 2s causes the timer to reset.

! DOCTYPE html html lang="en" head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta  name="viewport" content="width=device-width, /button id=" BTN " /button script var oBtn = Document.getelementbyid (' BTN ') /** ** @param {*} func[function] * @param {*} immediate specifies the time to wait for execution. The first or last click is immediate, and the parameter is true. */ function myDebounce(handle, wait = 300, immediate = false) { let timer = null return function (... res) { let first = immediate  ! Timer clearTimeout(timer) timer = setTimeout(() = {// Manually revert to the initial state (the next round starts from the timer is null). There is no timer = null! immediate  handle.apply(this, res) }, wait) first  handle.apply(this, Function btnClick(ev) {console.log(' 1111', this, ev) } // oBtn.onclick = btnClick // this ev oBtn.onclick = myDebounce(btnClick, 2000, true) /script /body /htmlCopy the code

Ii. Throttle

Specifies that a function can fire only once per unit of time. If more than one function is fired in this unit of time, only one function will take effect.

So again, in the case of 2s, throttling is when you click and then you click and it's always going to work, even if you keep clicking for 2s. But anti - shaking does not, anti - shaking requires you to click after 2s, otherwise the timing is invalid.

! DOCTYPE html html lang="en" head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta  name="viewport" content="width=device-width, /title body button id=" BTN " Click /button script var oBtn = Document.getelementbyid (' BTN ') // throttling: By throttling we mean throttling the function /** * for a custom period of time: * @param {*} func[function] : * @param {*} wait[number] : */ function myThrottle(fn, wait) {let lastTime = 0; return function(... Res){let now = new Date() if(now-lasttime wait){lastTime = now fn. Apply (this,res)}} // define the event to execute the function function BtnClick (ev) {console.log(' click 1111', this, ev) } // oBtn.onclick = btnClick // this ev oBtn.onclick = myThrottle(btnClick, 2000) /script /body /htmlCopy the code

Application scenarios

  • Image stabilization

    Search search association, the user in the continuous input value, use the anti - shake to save the request resources.

    The login and SMS buttons prevent users from clicking too fast and sending multiple requests.

    Resize the browser window too often, resulting in too much calculation.

    The text editor saves in real time and saves after one second when there is no change operation.

  • The throttle

    Scroll event, calculate position information every second, etc.

    Browser plays events, calculates progress information every second, and so on.

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.