Anti shake and throttling

scene （ Frequently triggered events ）

Page scroll bar scroll event , Web window resize event ,

Mouse drag move event , Click the button frequently click event ,

input Quickly enter events ......

Shake proof

When the event is triggered continuously , No more triggers for a certain period of time , The event handler will only execute once , If the set time comes before , It triggered the event again , Start the delay again .

Arrow function writing ：

  function debounce(func, delay) {
    var timer = 0
    return function(e) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          func(e)
        }, delay)
    }
  }

apply change this How to write it ：

  function debounce(func, delay) {
    var timer
    return function(e) {
        // console.log('timer', timer, e.target.value)
        clearTimeout(timer)
        var that = this
        var args = arguments

        timer = setTimeout(function(){
          func.apply(that, args);
        },delay)
    }
  }

demo

1. Input box ：

  var validate = debounce(function(e) {
    console.log('-- Interface --', e.target.value)
  }, 1000)

  document.querySelector("input").addEventListener('input', validate)

2. Scroll bar ：

  function showTop () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    console.log(scrollTop)
  }
  window.onscroll = debounce(showTop, 1000)

throttle

When the event is triggered continuously , Make sure to call the event handler only once in a certain period of time .

function throttling(fn, delay){
	let timer

	return function () {
	  if (!timer) {
		  timer = setTimeout(() => {
            fn()
            clearTimeout(timer)
            timer = null
          }, delay)
	  }
	}
}