防抖与节流（vue-自定义指令）

undefined*binding包含绑定值的对象*/inserted:function(el,binding){const{callback,ti??me}=binding.valueel.callback=callbackel.time=timeel.timeCall=nullel.addEventListener('click',()=>{clearTimeout(el.timeCall)el.timeCall=setTimeout(()=>{el.callback()},el.time||500)})},//组件调用的VNode更新时更新：function(el,binding){console.log('update')const{callback,ti??me}=binding.valueel.callback=callbackel.time=time},})核心原理const{callback,ti??me}=binding.valueel.callback=callbackel.time=timeel.timeCall=nullel.addEventListener('click',()=>{clearTimeout(el.timeCall)el.timeCall=setTimeout(()=>{el.callback()},el.time||500)})通过定时器setTimeout延迟执行点击回调，当el.time||500次，clearTimeout(el.timeCall)再次触发时关闭定时器，重新延迟el.callback=callbackandel.time=time再次挂在el上，当v-antiShake绑定的值更新时，事件触发更新回调update:function(el,binding){console.log('update')const{callback,ti??me}=binding.valueel.callback=callbackel.time=time}，命令testClick的值为不做deepwatch，只有当整体对象发生变化时才会触发命令中的updatehook函数click//testClicktestClick:{time:1000,callback:()=>{控制台。log(1111)console.log(this.test)}}一定时间内第一次触发会立即执行限流。如果在这段时间内再次触发，则不会执行！//实现Vue.directive('throttling',{//绑定元素插入到父节点时调用（只保证父节点存在，不一定插入到文档中）inserted:function(el,binding){const{callback,ti??me}=binding.valueel.callback=callbackel.time=timeel.addEventListener('click',()=>{constnowTime=newDate().getTime()if(!el.preTime||nowTime-el.preTime>el.time){el.preTime=nowTimeel.callback()}})},更新:function(el,binding){console.log('update')const{callback,ti??me}=binding.valueel.callback=callbackel.time=time}})el.preTime记录最后一次触发事件，每次触发比较nowTime（当前时间）和el.preTime是差值大于指定时间段！