preface

Front-end development will encounter some frequent events triggered, such as: Window scroll, resize; Mousedown, Mousemove, KeyUp, keyDown, etc., if you don’t do anything to your code, you will find that the page is stuck, trigger the interface request frequently and other problems, this article will analyze the function to achieve shaking, step by step gradually reveal the true face of function shaking 💜

concept

Understand the principle of anti – shake trigger and use it properly according to different application scenarios

Function debounce

If the action is invoked within n milliseconds, the execution time is recalculated and the action is not executedCopy the code

Understanding principle: although trigger event, but must be in the event triggered n seconds after the execution, if an event triggered within n seconds and triggered the event, with the time of the new event shall prevail, n seconds after the execution, in short, is to trigger the event within n seconds no longer triggered event, will be executed!

implementation

Image stabilization

According to the principle of anti-shake, the implementation code is as follows, and the following examples will be used in general:

Let count = 0 const log = () => {console.log(this) ++count console.log(count) (evt) { console.log(this) console.log(evt) ++count console.log(count) }Copy the code
const debounce = function (fn, delay){
    let timeout = null
    return function () {
        if (timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(fn, delay)
    }
}
Copy the code

Use frequent click events as an example

General use: meContain. Onclick = debounce(log, 1000)

react demo: … onClick={debounce(log.bind(this), 1000)}As you can see from the example, frequent click within 1s will output a log at the end, proving the principle of anti-shake

Have you found that there are still defects in the anti-shake function at this time

  • This points to and event objects
  • If the user keeps clicking the submit button now, the request will never be sent and will not be prompted, which is pretty bad for the user experience

This points to and event objects

This points to the

  • In the log function console.log(this), the value of this is undefined when debounce is not used. This is because the arrow function is used and bind(this) is called when onClick is called. This points to the react component example
  • In conventional use console.log(this), when debounce is not used, the value of this is:

<div id="mecontain"></div>

The event object

  • Without the debouce function, the ClickEvent object is printed
  • The debounce function, however, prints only undefined

Solve the above problems to change our code

const debounce = function (fn, delay){
    let timeout = null
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            fn.apply(context, args)
        }, delay)
    }
}
Copy the code

Interactive optimization experience

If you want to execute the function immediately, do not wait until the event stops triggering. After the event stops triggering for n seconds, you can trigger the function again by adding isImmeDiate to check whether the function is executed immediately

const debounce = function (fn, delay,isImmeDiate= false){ let timeout = null return function () { const context = this; const args = arguments; If (timeout) clearTimeout(timeout) if(isImmeDiate) {let callNow =! timeout timeout = setTimeout(function(){ timeout = null; }, delay) if(callNow) result = fn.apply(context, args) } else { timeout = setTimeout(() => { fn.apply(context, args) }, delay) } return result } }Copy the code

To add a cancel debounce switch, simply add a cancle function to clear timer timeout = null

const debounce = function (fn, delay,isImmeDiate= false){ let timeout = null const debounced = function () { const context = this; const args = arguments; If (timeout) clearTimeout(timeout) if(isImmeDiate) { timeout timeout = setTimeout(function(){ timeout = null; }, delay) if(callNow) result = fn.apply(context, args) } else { timeout = setTimeout(() => { fn.apply(context, args) }, delay) } return result } debounced.prototype.cancle = function() { clearTimeout(timeout) timeout = null } return debounced }Copy the code

So far we have implemented an anti-shake function, but do you have any other ideas?

Want AD. – Oh, that smells good

With the rapid development of e-commerce, the pressure of technology and business is getting bigger and bigger, and the recruitment of personnel has become our biggest development dilemma. No matter how good the planning is, the shortage of personnel is futile. We sincerely invite all fairy friends to get together here

This is just an example: 1. Understand at least one mainstream front-end framework (React Vue Angular, etc.) and understand the principles and design ideas behind the framework; 2. Like to study front-end technology, full of curiosity, good analytical and problem-solving skills; 3. Focus on cutting-edge technology and have strong learning ability; 4. Strong sense of responsibility, team work spirit, logical thinking ability and presentation ability;

We can see that we care more about your training potential and soft quality ability.

Plus: 1. Active in the front-end technology community and own open source projects; 2. Familiar with React Native, Flutter, applets, Hybrid Apps, etc., and have certain multi-terminal development experience; 3. Self-driven, strong learning ability, lively and cheerful personality; 4. Have fantastic ideas, good at implementing advanced ideas and concepts into projects, and have certain technical promotion ability; 5. Have some research on MV * framework source code;