javaScript——函数防抖

什么是函数防抖

函数防抖代码

//普通写法
var timer = null;
var timerFunc = ()=>{
     
	console.log("移动时间:"+new Date().getTime());
}
function moveFunc(){
     
	if(null != timer){
     
		clearTimeout(timer);
	}
	timer = setTimeout(timerFunc,1000);
}

window.addEventListener("mousemove", moveFunc);

//闭包创建私有变量
function timerFunc(){
     
	console.log("移动时间:"+new Date().getTime());
}

function moveFunc(func,delay){
     
	var timer = null;
	return () => {
     
		if(null != timer){
     
			clearTimeout(timer);
		}
		timer = setTimeout(()=>{
     
			func.apply(this, arguments)
		} ,delay);
	}
}

window.addEventListener("mousemove", moveFunc(timerFunc,1000));

个人觉得函数防抖比函数节流要难理解一些，所以这里我多加一个实际应用的场景，便于理解它与函数节流的区别。这里的目标场景是在一个android手机的登录页面,当系统软键盘弹出的时候，会引发整个窗口大小的变化。这个时候，我需要做的就是在整个窗口高度变化的过程结束之后去判断该执行的步骤，废话少说，直接看代码：

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = function () {
     
    var nowClientHeight = document.documentElement.clientHeight || 	document.body.clientHeight;
    if (clientHeight > nowClientHeight) {
     
        //键盘弹出的事件处理
        console.log("键盘弹出的事件处理")
    }else {
     
        //键盘收起的事件处理
        console.log("键盘收起的事件处理")
    }
}

这里我们打开一个新的浏览器窗口（最好是一个空的窗口），打开开发者模式，把窗口调成responsive，如图（我用的是Google）

然后直接把上面的代码粘贴进去，再拖动窗口底部来改变窗口高度

效果：

这就是没加函数防抖的效果，接下来我们再看看加了函数防抖的效果：

function ableChange(func,delay){
     
    var timer = null;
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    return () => {
     
        if(null != timer){
     
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
     
            func.call(this,clientHeight);
        },delay)
    }
}


window.onresize = ableChange(function(clientHeight){
     
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (clientHeight > nowClientHeight) {
     
        //键盘弹出的事件处理
        console.log("键盘弹出的事件处理")
    }
    else {
     
        //键盘收起的事件处理
        console.log("键盘收起的事件处理")
    }
},200);

重复上面的步骤，在粘贴代码的时候用上加了函数防抖的代码，效果：

函数节流和函数防抖的区别还是挺大的，以我个人的理解，就像一辆列车，如果我想获取它实时运动的路线，它可能一直在上传它的位置信息。但是这个没必要，为了节约上传的流量，或者减轻服务器的压力，这个时候我们就可以用到函数节流，让它10秒上传一次。如果我想获取它达到匀速行驶(这里假设速度在一分钟之内没有变化)时的速度，这个时候就用可以用到函数防抖(过滤掉数值上下变动的状态,当数值稳定一定时间后再去进行下一步操作)。