防抖函数debounce/节流throttle
对于refresh非常频繁的问题, 进行防抖操作

防抖函数与节流起作用的过程

函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。
1. 持续触发不执行
2. 不触发的一段时间之后再执行

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。什么叫有节制呢？就是在一段时间内，只执行一次。
1. 持续触发并不会执行多次
2. 到一定时间再去执行

实例

  • 如果我们直接执行refresh, 那么refresh函数会被执行很多次.
  • 可以将refresh函数传入到debounce函数中, 生成一个新的函数.
  • 之后在调用非常频繁的时候, 就使用新生成的函数.
  • 而新生成的函数, 并不会非常频繁的调用, 如果下一次执行来的非常快, 那么会将上一次取消掉.(即，延迟时间内的函数不会执行)
    防抖通俗来说就是：在执行后的X秒内，如果还有操作就取消上一次操作，直到X秒没有操作就提交返回。

代码如下：

debounce(func, delay) {
    let timer = null

    return function (...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => { //timer是闭包的参数
            func.apply(this, args)
        }, delay)
    }
}

//调用
this.debounce(this.$refs.scroll.refresh,500)

参数一：func是传入的需要做防抖处理的函数本身
参数二：dela是表示等待时间

setTimeout是异步函数

就是同步优先，异步靠边，回调垫底。setTimeout里面的异步函数是在下一次事件循环时候才会执行。

防抖和节流的区别

防抖是将多次执行变为最后一次执行，
节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法：时间戳和定时器

赏