This is the third day of my participation in the August More Text Challenge

When performing operations such as window resize, Scroll, and input box content verification, if the event processing function is called at an unlimited frequency, the burden on the browser will be increased, resulting in poor user experience

Debounce and throttle can be used to reduce the frequency of calls without compromising performance

Function anti-shake:

Debounce: When an event is continuously triggered and no event has been triggered for a certain period of time, the event handler is executed once. If the event is triggered again before the specified time, the delay is restarted

The handle function is not executed when the Scroll event is triggered continuously. The Scroll event is delayed only when the scroll event is not triggered within 1000 milliseconds

function debounce(fn, wait) {
    var timeout = null;
    return function () {
        if(timeout ! = =null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait); }}// handle the function
function handle() {
    console.log(Math.random());
}
// Scroll events
window.addEventListener('scroll', debounce(handle, 1000))
Copy the code

Function of the throttle

Function throttle: When continuous triggering event, guarantee period only calls an event handler throttling popular explanation for example, we tap water, the valve is opened, the water stream flowing downwards, with the advantages and good traditional virtue of thrift, we have to turn down the faucet, it is best if we will according to certain rules in a certain interval drip drip down

As follows, if the Scroll event is continuously triggered, handle is not executed immediately but only once every 1000 milliseconds

var throttle = function (func, delay) {
    var prev = Date.now();
    return function () {
        var context = this;
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now(); }}}function handle() {
    console.log(Math.random());
}

window.addEventListener('scroll', throttle(handle, 1000));
Copy the code
  • Conclusion:

Function stabilization: Combine several operations into one operation. The idea is to maintain a timer that fires after the delay, but if it fires again within the delay, the timer will be cancelled and reset. Once this happens, only the last operation can be triggered

Function throttling: causes functions to fire only once in a given period of time. The principle is to trigger the function by judging whether a certain time has been reached

The difference between:

Function throttling ensures that a true event handler is executed within a specified period of time, no matter how frequently the event is triggered, whereas function stabilization fires only once after the last event. For example, in an infinite load scenario, we want the user to make Ajax requests every once in a while while the page is scrolling, rather than asking for data when the user stops scrolling. This scenario is suitable for throttling technology to achieve