防抖:用户触发事件太过频繁,只要最后一次事件操作 例如:
这里我们在网页中创立了一个inptu标签,用input事件在控制台获取了标签内容(类似我们在以后项目中的搜索栏里从后端获取需要的数据),此时出现了这个问题:
可以看到我们只输入了前端两个字,控制台触发了很多次事件,而我们只需要最后一次的事件结果;
我们可以用定时器来控制事件触发事件:
这种方法又会有一个问题,我们需要的业务只有一行console.log(this.value),其他的都是防抖函数,还多了一个timer的全局变量,项目中出现这样代码就太乱了,我们可以用闭包来封装这个函数,这样就可以把业务代码和函数分离开:
我们封装了一个debounce函数,此时deboucun中的fn()返回的就是我们的业务代码,这里用call改变一下this,因为在业务代码中的this指向function函数,此时对象是window(这里写的不太清楚)。 到这里我们的防抖功能就完成了
节流:控制高频事件执行次数 我们设置一个scroll事件,每次我们滚动窗口的时候,会被触发很多次;这里我们用了flag=true的变量来控制定时器,当flag=true的时候执行定时器,执行完成后,把flag改成false,再到if里把flag改回true,这样就能控制事件在定时器的时间内执行一次,封装逻辑跟防抖是一样的,具体代码如下: