Anti-shake and throttling for JavaScript functions

Source: Internet
Author: User

Tags: browser else learn ONS public number mouse speed public click


Anti-shake shake to prevent hand shake

is to trigger multiple events within a certain period of time, and only the last one is executed.

For example, Baidu Search Association, will only associate the last character entered

function Resizeevent (content) {  console.log (' window ' +content)}let event = debounce (resizeevent) function Debounce (func, delay) {let  timeOut = null  return (args) = {    if (timeOut!== null) {      //clears the last timer, re-timer C5/>cleartimeout (timeout)    }    timeout = SetTimeout (() = {      func (args)    }, delay)  }}// Trigger event AddEventListener When resizing the browser window (' Resize ', () =>{event (1)})

Application: Lenovo, when users continue to enter values, save the request resources, to ensure that Lenovo is correct

2.window Resize event, anti-Shake lets it trigger only once


Triggers multiple events over a period of time, and the function executes once after each interval.

For example, the FPS game has been pressing the mouse, submachine gun bullets at a certain speed bursts

function Resizeevent (content) {  console.log (' window ' +content)}let event = throttle (resizeevent) function Throttle (func, delay) {Let's  = null let  Defertimer = null  return (args) + = {Let now    = new Date (). g Ettime ()    if (last && now < last + delay) {     //not to interval time, clear timer      cleartimeout (defertimer)      Defertimer = SetTimeout (() = {      //re-new timer, wait interval after set last, execute function function Last        = Now        func (args)      }, Delay)    } else {      //First or past interval last = Now      func (args)    }  }}//event is triggered when resizing the browser window AddEventListener (' Resize ', () =>{event (1)})


1. The mouse is constantly clicked to trigger a function, MouseDown (only once per unit of time)

2. The mouse is constantly moving to trigger a function, MouseMove (only triggered once per unit of time)


Stabilization and throttling

The same points are intended to solve the performance problems caused by a large number of triggering of a function in a short time.

Different points are based on different business requirements, the principle of implementation is different.

There are problems to discuss together, welcome to the public number of small Qin notes

Anti-shake and throttling for JavaScript functions

Related Article

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.