Vue 刷新频繁的防抖函数处理&&函数节流(throttle)

lxf2024-04-04 03:29:49

  频繁的刷新或搜索时频繁请求都是不必要的且影响性能,这时就需要添加防抖函数间隔一段时间再刷新。

  将refresh函数传入到debounce函数中去,生成一个新的函数;

  只有在调用非常频繁的时候,就使用新生成的函数;

  而新生成的函数并不会非常频繁的执行,如果下一次执行来的非常快,那会将上一次的取消掉。

  1. 什么是函数去抖 & 函数节流让某个函数在一定 事件间隔条件(去抖debounce) 或 时间间隔条件(节流throttle) 下才会去执行,避免快速多次执行函数(操作DOM,加载资源等等)给内存带来大量的消耗从而一定程度上降低性能问题。debounce: 当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。throttle:预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。debounce使用场景    scroll事件(资源的加载)    mousemove事件(拖拽)    resize事件(响应式布局样式)    keyup事件(输入框文字停止打字后才进行校验)

  Vue 刷新频繁的防抖函数处理&&函数节流(throttle)

  Vue 刷新频繁的防抖函数处理&&函数节流(throttle)