标签：事件处理 防抖 函数 javaScript clientHeight timer var

函数防抖

• 什么是函数防抖
• 函数防抖代码

什么是函数防抖

函数防抖代码

//普通写法
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秒上传一次。如果我想获取它达到匀速行驶(这里假设速度在一分钟之内没有变化)时的速度，这个时候就用可以用到函数防抖(过滤掉数值上下变动的状态,当数值稳定一定时间后再去进行下一步操作)。

标签：事件处理,防抖,函数,javaScript,clientHeight,timer,var
来源： https://blog.csdn.net/qq_35508835/article/details/105186197

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。