函数防抖节流
什么是防抖和节流? 防抖和节流严格算起来应该属于性能优化知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。
防抖: 对于短时间内连续触发的事件,防抖的含义就是让某个时间期限(setTimeOut)内,事件处理函数只执行一次。
节流: 可以设计一种类似控制阀门一样定期开放的函数,也就是让函数执行一次,在某个时间段内暂时失效,过了这段时间后在重新激活(类似于技能冷却时间)。
效果: 如果短时间内大量触发同一事件,那么函数在执行一次之后,该函数在指定的时间期限内不再工作,直到过了这段时间才重新生效。
下面我们进行举例子:
节流 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id='inp'>
<script>
let Oinput = document.getElementById('inp')
function show() {
let timer = null;
return function() {
setTimeout(() => {
fun();
}, 1000)
}
}
function fun() {
console.log('防抖成功')
}
Oinput.addEventListener('input',show(fun))
</script>
</body>
</html>
防抖 页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function show(fun) {
let timeout = 1000;
let flag = true; // 通过闭包保存一个标记
return function() {
if(!flag) return;
setTimeout(() => {
fun.apply(this, arguments);
flag = true;
}, timeout);
}
}
function fun(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', show(fun))
</script>
</body>
</html>
成功没有捷径,踏踏实实一步一个脚印。