Anti-shake and throttling for JavaScript functions

Source: Internet
Author: User

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

Stabilization

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:

1.search 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

Throttling

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)})

Application:

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)

Summarize

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

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: