节流(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)

timer = setTimeout(()=>{

timer = null

}, wait)

if(now){

fn.apply(this, arguments)

}

}

}

在vue中使用

1、注册全局指令，具体代码如下：

// 注册全局节流指令

Vue.directive('throttle', {

bind(el, binding) {

let executeFunction

if (binding.value instanceof Array) {

const [func, timer] = binding.value;

executeFunction = throttle(func, timer);

} else {

console.error(`throttle指令绑定的参数必须是数组，且需执行的事件类型或函数或时间间隔不能为空`)

return

}

el.addEventListener('click', executeFunction);

}

})

// 注册全局防抖指令

Vue.directive('debounce', {

bind(el, binding) {

let executeFunction

if (binding.value instanceof Array) {

const [func, timer] = binding.value;

executeFunction = debounce(func, timer);

} else {

console.error(`debounce指令绑定的参数必须是数组，且需执行的事件类型或函数或时间间隔不能为空`)

return

}

el.addEventListener('click', executeFunction);

}

})

2、在main.js中导入

import './directives'

3、在组件中使用

export default {

methods: {

throttleCallBack(val) {

console.log('点击了节流按钮',val);

},

debounceCallBack(val) {

console.log('点击了防抖按钮',val);

},

}

};