今天突然心血来潮想封装防抖,但是发现百度出来的,并不能适用于大部分情况,所以今天自己尝试换一种思路去解决这个问题。
关于传统的方案,主要都有以下问题:
1.this的问题
一般情况下,我们可以直接传入一个可执行函数,防抖函数通过闭包,return一个setTimeout包裹的函数回来。但是vue2中我们写在methods里的方法,是通过this调用的。这种不合适。
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
2.兼容问题
针对这种问题,我们可以简单改造一下,封装一个vue2版本的。但是这种情况下,我们需要在methods定义多一遍函数,另外vue3的setup中并没有this,因此也不兼容。
// fnName为string
function Vue2Debounce(fnName, time) {
let timeout = null;
return function() {
if (timeout) {
clearTimeout(timeout);</