Front - end interview check and fill gaps -(1) tremble and throttling

preface

This series started with preparing yourself for an interview. Later found more and more sorting, almost 120,000 characters, finally decided to share to everyone.

In order to share the sorting out, I spent a lot of time, at least three times as much time as ONLY myself. If you like, welcome to collect, follow me! Thank you very much!

The article links

Front – end interview check and fill gaps -(1) tremble and throttling
(2) Garbage collection mechanism
(3) Cross-domain and common solutions
(4) Front-end local storage
(5) Rendering mechanism and redraw and backflow
Front – end interview -(six) browser cache
(7) XSS attack and CSRF attack
(8) Front-end encryption
(9) HTTP and HTTPS
Check and fill gaps in front interview –(10) Front authentication
(11) Front-end software architecture pattern MVC/MVP/MVVM
(12) From the input URL to the page to see the whole process (including three handshake, four wave detailed explanation)
Front – end interview leak -(13) memory leak
Front – end interview omission and filling -(xiv) algorithm and sorting
(15) Event Loop

Collection of articles:

The Index (120,000 character collection) contains more than a dozen other articles in the series written so far. The following new value-added articles will not be added in each link, strongly suggest that the comments like, pay attention to the collection!!!! , thank you! ~

Follow-up Update Plan

Design pattern, front-end engineering, project process, deployment, closed loop, vUE often test knowledge and other contents will be added in the future. If you think the content is good, welcome to collect, follow me! Thank you very much!

Ask for an extrapolation

At present, I am also preparing for job-hopping. I hope you and HR sister can promote a reliable front-end position in Wuhan! Email :[email protected]. Thanks! ~

Shake and throttling

Same: in the premise of not affecting the customer experience, the frequent callback function, the number of times reduced. Avoid page jams caused by heavy computation.

Difference: Shaking turns multiple executions into the last, and throttling turns multiple executions into only one execution within a specified period of time.

Image stabilization

Definition:

After the event is triggered, the callback function can be executed only once within the specified time. If the event is triggered again within the specified time, the time will be counted again.

There is this metaphor on the Internet: function stablization is the mage to read a skill when it is not finished, and then press the skill will refresh the skill, read again.

In four words, delayed execution

Application scenario:

Two conditions: 1, if the customer’s continuous operation results in frequent event callbacks (which may cause page stalling). 2, the customer only cares about the result returned by the “last” operation (which can also be understood as after the continuous operation has stopped). Such as:

Enter the search lenovo, the user in the continuous input value, with shaking to save the request resources.
Click the button: collection, like, heart mark, etc

Principle:

The callback function is delayed by the timer. If the callback continues within the specified time and the previous timer is found, the system clears the timer and resets the timer. One detail is that all subsequent callback functions need to have access to the previously set timer, which is where closures are needed (more on this later).

Two versions

There are two kinds of anti-shaking:

1) Non-immediate execution version: event trigger -> delay -> execute callback function; If the event continues to be fired during the delay, the delay will be repeated. The callback function is executed after the delay ends. A common example: the input search box, which is automatically searched after the customer has typed
2) Immediate execution version: event trigger -> execute callback function -> delay; If the event continues to be fired during the delay, the delay will be repeated. The callback function is not executed after the delay ends. A common example: preventing click on a button. Such as like, heart mark, favorites and other buttons with immediate feedback.

Implementation code and ideas:

// Non-immediate execution version:
// First prepare the callback function to be used
function shotCat (content) {
  console.log('shotCat produced, must be a boutique! Must like! (funny) ')}// Then prepare the wrapper function:
//1, save the timer identifier
//2, return the closure function: 1) clear the timer judgment; 2) Generally, you also need to save the parameters of the function (usually the object returned by the event) and the context (the timer has implicit loss of this, details can be seen on js I don't know).
// Finally, it is not recommended to save the timer identifier by defining a global variable instead of a closure.
function debounce(fun, delay = 500) {
// Let timer = null save timer
    return function (args) {
        let that = this
        let _args = args
		// There are two ways to set the timer. The first way is to save the timer on the property of the function (which is also an object).
		// This is easy to write, but not very common
        clearTimeout(fun.timer)
        fun.timer = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
		// This is the first time that I have been to the United States
		//if (timer) clearTimeout(timer); Compared to the above method, there is one more judgment
		//timer = setTimeout(function () {
        // fun.call(that, _args)
        //}, delay)}}// Then use the variable store to save the delayed function returned by debounce
let debounceShotCat = debounce(shotCat, 500)  

// Finally add the event listener callback debounceShotCat and pass in the object returned by the event
let input = document.getElementById('debounce')
input.addEventListener('keyup'.function (e) {
        debounceShotCat(e.target.value)
})



// With the option to execute immediately:
If the timer is executed immediately, the callback function is no longer included in the timer. Instead, after the callback function is executed, the timer is only used to delay and reset the timer identifier
function debounce(fun, delay = 500,immediate = true) {
    let timer = null // Save timer
    return function (args) {
        let that = this
        let _args = args
		if (timer) clearTimeout(timer);  // The timer needs to be cleared first, regardless of whether it is executed immediately
        if (immediate) {
		    if ( !timer) fun.apply(that, _args)  // If the timer does not exist, the delay has expired and the function can be executed immediately
			// The timer needs to be reset regardless of whether the previous delay completed
            timer = setTimeout(function(){
                timer = null; // After the time, the timer is automatically set to NULL, not only convenient to determine the timer state and avoid memory leaks
            }, delay)
        }
        else {
		// If not immediately executed, reset the timer and put the callback into it
            timer = setTimeout(function(){ fun.call(that, _args) }, delay); }}}Copy the code

The throttle

Definition:

When the event is continuously raised, the callback function can only be called once within a specified period of time. If the event is triggered again within the specified time, nothing is done and the timer is not reset.

Compared with anti-shaking:

Shaking turns multiple executions into the last, and throttling turns multiple executions into only one execution within a specified period of time. Timers are usually not reset. If (timer) clearTimeout(timer); (except for timestamp + timer version)

Application scenario:

Two conditions: (1) the customer fires events continuously and frequently, and (2) the customer no longer cares only about the feedback after the “last” action. It’s continuous feedback throughout the operation. Such as:

The mouse keeps clicking on the trigger, and the click event is only triggered once within the specified time (only triggered once within the unit time)
Listen for scroll events, such as whether the slide to the bottom automatically loads more, using throttle to determine

Note: When events are fired continuously and frequently, they must be fired at least at a shorter interval than the specified time.

Principle:

Throttling can be implemented in two ways

1. Timestamp mode: The last timestamp is saved by a closure and compared to the timestamp triggered by the event. If it is longer than the specified time, a callback is performed. Otherwise, do nothing.
- Characteristics: Generally, the first time will be executed immediately, and then the event will be triggered frequently, and it will be executed only once after the specified time. The last time the event was fired, it will not be executed. (Note: if your last event was fired longer than the specified time, then it is not continuous.)
1. Timer mode: the principle is similar to anti – shaking. Save the last timer state with closures. Then, when the event is triggered, if the timer is NULL (that is, the interval is longer than the specified time), a new timer is set. The callback function is executed and the timer is set to NULL.
- Feature: When the event is first fired, the function is not executed immediately, but only after the specified time. After that, events are triggered continuously and frequently, and they are not executed until the specified time (because of the timer). When you stop firing for the last time, a callback is executed due to the timer delay (and that’s the callback from the last successful firing, not the last time you fired). The bottom line is delayed callbacks. The only callbacks you see are those that were triggered successfully last time, not the ones you triggered now.
Note: The biggest difference between the two is that the timestamp version of the function is triggered at the specified time, while the timer version of the function is triggered at the specified time end. Other differences can be seen in my bold words. To understand this, consider the following code example,

Implementation code and ideas:

// Time stamp version:
// I don't want to write it out
function throttle(fun, delay = 500) {
    let previous = 0;  // Record the timestamp of the last trigger. The initial value is set to 0 to ensure that the callback is generated on the first trigger
    return function(args) {
        let now = Date.now(); // Record the timestamp of the trigger at this point
        let that = this;
        let _args = args;
        if (now - previous > delay) {  // If the time difference is greater than the specified time, triggerfun.apply(that, _args); previous = now; }}}// Timer version:
function throttle(fun, delay = 500) {
    let timer;
    return function(args) {
        let that = this;
        let _args = args;
        if(! timer) {// If the timer does not exist, a new timer is set. When the timer arrives, the callback is executed and the timer is set to null
            timer = setTimeout(function(){
                timer = null;
                fun.apply(that, _args)
            }, delay)
        }

    }
}




// Time stamp + timer version: the first trigger can respond immediately, the end of the trigger can also have a response (this version is the most in line with the actual work requirements)
// The main idea of this version is the timestamp version. The function of the timer is only to perform the last callback
function throttle(fun, delay = 500) {
     let timer = null;
     let previous = 0;
     return function(args) {
             let now = Date.now();
             let remaining = delay - (now - previous); // How much time is left
             let that = this;
             let _args = args;
             clearTimeout(timer);  // Clear the timer set earlier
              if (remaining <= 0) {
                    fun.apply(that, _args);
                    previous = Date.now();
              } else {
                    timer = setTimeout(function(){
                    fun.apply(that, _args)
            }, remaining); // Because of the clearTimeout added above, the actual timer will only be executed for the last time}}}Copy the code

Front – end interview check and fill gaps -(1) tremble and throttling

preface

The article links

Collection of articles:

Follow-up Update Plan

Ask for an extrapolation

Shake and throttling

Image stabilization

Definition:

Application scenario:

Principle:

Two versions

Implementation code and ideas:

The throttle

Definition:

Compared with anti-shaking:

Application scenario:

Principle:

Implementation code and ideas:

Related Posts

Mobile Adaptation: How should adaptive layout be implemented?

WebPark-javascript heap out of memory package startup error

Week 283: Append K integers to array