Throttle (Throttle) and shake javascript function (Debounce)

First introduced the concept of anti-shake function and throttle

Throttle function: after a performed once, and only after the execution cycle will be larger than the set perform a second function. There is a frequent trigger function for optimizing the performance point of view, within the specified time, so that only function is triggered for the first time to take effect, the back does not take effect.

Why use a function of throttle it?

For example, we now have a page that has a lot of stories in the building from top to bottom, we need to listen scroll event when the page scrolls the page to dynamically compare the current scroll position at the height of each floor of the page to calculate the current page in which floor to stay, but the scroll event trigger frequency is too high, 10ms will trigger several times to calculate such a high frequency, especially eating cpu, mobile phones if performance is not good enough, the entire page might slip up special Caton. And obviously, we calculate the calculation of the frequency of the current does not need such a high floor, about 100ms calculated once will be enough, this time we can use the function to calculate the throttle floors plus 100ms perform a function of the throttle. The calculated increase throttled up to perform a function of 100ms, a frequency is calculated several times lower than the previous few millimeters, cpu load reduction, performance has improved on the page.

Demonstrates:

function getCurrentFloor () {
  // 楼层计算代码
}
// 获得节流后的计算函数
getCurrentFloor = throttle(getCurrentFloor, 100) // 文章末附节流代码

dom.addListenerEvent('scroll', getCurrentFloor, false)
复制代码

Anti-shake function: a required function frequently triggered within the specified time, just let the last time to take effect, the front does not take effect. Image stabilization effect show:

FIG driven DevTools the right panel of the network can be seen, known almost continuous input during a plurality of characters are not sent http request for each character, only the input is stopped after about 500ms to issue a search request disposable. This effect is the use of anti-shake function and implementation, allows the browser to send a lot less meaningless requests, while reducing the pressure on the server concurrently.

Demonstrates:

function doSearch () {
  // 搜索操作
}

doSearch = debounce(doSearch，500) // 返回一个500ms只会执行最后一次调用的doSearch函数

let searchInput = document.querySelector('.search-input')

searchInput.addEventListener('input'， doSearch， false)
复制代码

Achieve the throttle and deounce

Performance.js

class Performance {
  static instance
  constructor () {
    return Performance.instance || (Performance.instance = this)
  }

  // 节流函数
  throttle (fn, time = 50) {
    let nowTime
    let lastTime
    return function (...args) {
      nowTime = +(new Date())
      if (!lastTime || nowTime - lastTime >= time) {
        fn.call(this, ...args)
        lastTime = nowTime
      }
    }
  }
  
  // 防抖函数
  debounce (fn, time = 50) {
    let timer
    return function (...args) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(fn.bind(this, ...args), time)
    }
  }
}
let instance = new Performance()
let { throttle, debounce } = instance
export { Performance, throttle, debounce }
复制代码

These are in the class library jh-util Properties Performance module

Jh-util library attached github connected:

github.com/junhaogz215…

Library is slowly improving them, if insufficient also please exhibitions

Reproduced in: https: //juejin.im/post/5d079790f265da1bca51dba5