vue中防抖动使用_js事件节流和防抖以及在vue中的使用

节流(throttle)

原理：

事件触发后，在指定时间内不会再触发，等到达这个指定时间后会再触发。简言之，就是让事件按一定的频率来触发，从而大大减少触发次数。

应用场景：

窗口的 resize 事件，在改变浏览器窗口大小的过程中，resize是会不断执行的，频率非常之高，这时候就可以运用节流来控制resize事件的触发。

export function throttle(fn, wait=500){

let last = 0

return function (){

let now = Date.now()

if(now - last > wait){

fn.apply(this, arguments)

last = now

}

}

}

防抖(debounce)

原理：

多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

应用场景：

点击某个操作按钮向服务器发送操作请求，为了避免重复发起请求，可以用防抖来控制只向服务器请求一次

export function debounce(fn, wait=500){

let timer = null

return function (){

let now = !timer

timer && clearTimeout(timer)