防抖:事件在n秒后执行,若在这期间连续出发,则重新计时。
把先前事件触发的行为操作清除 只保留最后一次
原理: 每次执行回调之前,先把上一次的回调清除掉,再开启一个新的回调
function debounce (fn,time){
let timer=null
return function(){
// 清除上一次的timer
clearTimeout(timer)
timer = setTimeout(() => {
// 1. 问题产生的原因是因为fn内部的this指向的不是组件的实例对象
// 2. 解决的办法就是强制让fn内部的this指向 变成当前的组件实例对象
// 3. 这个外层函数的function最终会被debounce执行之后赋值给组件选项
// 4. 组件选项methods中的每一个方法内部的this都会被vue框架强制指向组件实例对象
fn && fn.call(this)
}, time)
}}
注意 vue组件使用时箭头函数中this的指向 ,事件触发者,,替换到具体逻辑this值上