This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

The anti-shake and throttling function is one of the most commonly used high-frequency trigger optimization methods, which can greatly help performance.

There are many ways to implement the two optimization methods, this article only introduces several implementation ideas.

More articles in my Github and personal public account [full zhandao road], welcome to watch [an unknown football dog’s front knowledge point], if there are benefits, do not pay, little hands point a Star.

Read this article and you will learn

  • The principle and partial realization of anti – shake
  • Throttling principle and part of the implementation

Writing in the front

  • Front-end engineers often deal with events during development, such asclick,onChange,resizeEvents and so on, but when we listen for things likescroll 、onChangeThe events are triggered very frequently.
  • For chestnut, when we are listening to the browser page scroll event, often a user scroll event of the wheel will trigger multiple times, once we have dealt with DOM manipulation in the callback, backflow redraw many times will inevitably affect the performance of the browser, light the browser frame and affect the user experience, or crash the browser.
  • So how do we solve this problem? A good way is to reduce the frequency of these high frequency operations, or combine multiple operations into one callback execution. Anti-shake and throttling are good ways to solve this problem.

Image stabilization

  • Debounce: Optimizes multiple high-frequency operations to be performed only on the last one.
  • How it works: Execute the callback function n seconds after the event is triggered. If the event is retriggered within n seconds, the timer is reset. The result is to consolidate frequently triggered events into one and execute them last.
  • Usage scenario: After user input, input verification can be done.
Var timer = false; function(){ clearTimeout(timer); Timer = setTimeout(function(){console.log(" console.log "); }, 300); };Copy the code
Function debounce(fn, wait, Immediate) {// timer = null return function() {// Use this and arguments. let args = arguments let context = this if (immediate && ! timer) { fn.apply(context, If (timer) clearTimeout(timer) timer = setTimeout(() => {fn.apply(context, args)}, wait) } }Copy the code

The throttle

  • Throttling: To perform it at regular intervals, that is, to reduce the frequency and optimize high frequency operations into low frequency operations.
  • Principle: Specify a time n, within n seconds, will trigger the event into a time and execute.
  • Usage scenario: The scrollbar event or resize event is executed every 100 to 500 ms.
Var canRun = true; function throttle(){ if(! CanRun){// If the function is in execution, return return; } canRun = false; SetTimeout (function(){console.log(" function throttling "); canRun = true; }, 300); };Copy the code
function throttle(fn, cycle) { let start = Date.now(); let now; let timer; return function () { now = Date.now(); clearTimeout(timer); if (now - start >= cycle) { fn.apply(this, arguments); start = now; } else { timer = setTimeout(() => { fn.apply(this, arguments); }, cycle); }}}Copy the code

Write in the last

If you find this article beneficial to you, please like it and share it with more people who need it!

Welcome to pay attention to “Quanzhandao road” and wechat official account “Quanzhandao Road”, get more good articles and free books!
If you need [Baidu] & [Bytedance] & [JINGdong] & [Ape Tutoring], please leave a message, you will enjoy VIP speed push service ~

Past oliver

Deep and shallow copies of the front end

Chrome Developer Tools to Improve development efficiency

Create a personalized Github profile

Implementation of wechat JS API payment

The interviewer asks you<img>What would you say about the element

Special JS floating-point number storage and calculation

Long [word] baidu and good interview after containing the answer | the nuggets technology essay in the future

Front end practical regular expression & tips, all throw you 🏆 nuggets all technical essay | double festival special articles

A detailed explanation of the unpopular HTML tabIndex

A few lines of code teach you to solve the wechat generated posters and two-dimensional code

Principle of Vue3.0 Responsive data: ES6 Proxy

Make the interviewer fall in love with you

How to draw a fine line gracefully

[3 minutes] Front-end performance optimization -HTML, CSS, JS parts

Front-end performance Optimization – Page loading speed optimization

Front-end Performance Optimization – Network transport layer optimization