Image stabilization

The callback is executed n seconds after the event is fired. If the event is fired within n seconds, it waits another n seconds before executing the callback.

example

// Simulate an Ajax request
function ajax(content) {
  console.log('ajax request ' + content)
}

let inputa = document.getElementById('unDebounce')

inputa.addEventListener('keyup'.function (e) {
    ajax(e.target.value)
})
Copy the code

Here’s the result:

As you can see, all we have to do is press the keyboard to trigger this Ajax request. Not only is it a waste of resources, but in practical application, the user will output the complete character before the request. Let’s optimize it:

// Simulate an Ajax request

  function ajax(content) {
     console.log('ajax request' + content)
  }
  function debounce(fn, delay) {
    let timer;
    return function () {
      let context = this;
      const args = [...arguments];
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() = > {
        fn.apply(context, args);
      }, delay);
    };
  }
  let dedebounceajax =  debounce(ajax,1000);
  var inputs = document.getElementById('inputs')
  inputs.addEventListener("keyup".(e) = >{
      dedebounceajax(e.target.value)
  })
Copy the code

Here’s the result:

As you can see, after we added the shake stabilization, the request is not sent when you are typing frequently, but only when you are not typing within the specified interval. If you stop typing but enter again within a specified interval, the timing is retriggered.

The throttle

Specifies that the function can only be fired once per unit time. Let’s say you click a button for five seconds. No matter how many times you click the button within five seconds, the five seconds will only take effect once.

example

// Time stamp arrow function version throttling function

function throttle(func, wait) {
    let timer = 0;
    return (. rest) = > {
      let now = Date.now();
      let that = this;
      if(now > timer + delay) { fn.apply(that, rest); timer = now; }}; }// Timer version throttling function

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if(! timeout) { timeout =setTimeout(() = > {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}

let throttleAjax = throttle(ajax, 1000)
let inputc = document.getElementById('throttle')
inputc.addEventListener('keyup'.function(e) {
    throttleAjax(e.target.value)
})

Copy the code

Here’s the result:

As you can see, as we keep typing, Ajax will execute every second of the time we set.

conclusion

• Function buffering and function throttling both prevent frequent firing at one time, but the principle is different.
• Function buffering is executed only once in a certain period of time, while function throttling is executed at intervals.

Application scenarios

Application scenarios of anti-shaking

• Input box search, the user is constantly entering values, using anti – shaking to save request resources.
• When the window triggers resize, constantly resizing the browser window will trigger this event again and again, using anti-shaking to make it trigger only once.

Throttle Application Scenarios

• Mousedown (triggers only once per unit time)
• Listen for scroll events, such as whether the slide to the bottom automatically loads more, using throttle to determine