Anti shake function

seeing the name of a thing one thinks of its function , Prevent your hand from shaking and accidentally click twice , Or shaking all the time

The first one is , Such as fuzzy search , People have been typing , We want him to perform a search when he finishes typing , But we don't know when he will end , So we pretend that he doesn't enter in a certain period of time , When he's done typing

function generateDebounce(fn, delay) {
    let timer
    let args
    return function() {
        args = arguments
        window.clearTimeout(timer)
        timer = window.setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

The second anti shake , Click the login button , Then I accidentally clicked many times , This is relatively simple

let loading = false
async function onClickLogin() {
    if (loading) return
    loading = true
    const result = await login(/** ...someArgs */)
    loading = false
}

Throttling function

seeing the name of a thing one thinks of its function , Save traffic , This is very similar to anti shake , The difference is that it is intentional , We want the continuous execution method to execute in an interval , For example, we scroll bar events , We did a lazy loading of pictures , We need to compare the position of the scroll bar in real time , But not every time , We just need to make users look continuous

function generateThrottled(delay, callback) {
  let timer
  let args
  return function throttled() {
    args = arguments
    if (timer) return
    timer = window.setTimeout(() => {
      callback(...args)
      timer = null
    }, delay)
  }
}