前端防抖和节流函数
2019-06-11 本文已影响0人
阳光之城alt
image.png
说多了没有用
直接上代码
防抖函数优化
解决谷歌浏览器 滑动警告报错 touch-action: pan-y;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<div class="btn"> https://mp.weixin.qq.com/s/LgwTCzBgYWBe2JFXg8YMtQ<br />
scroll 事件本身会触发页面的重新渲染，<br />
同时 scroll 事件的 handler 又会被高频度的触发, <br />
因此事件的 handler 内部不应该有复杂操作，<br />
例如 DOM 操作就不应该放在事件处理中。<br />
针对此类高频度触发事件问题<br />
（例如页面 scroll ，屏幕 resize，监听用户输入等）<br />
，下面介绍两种常用的解决方法，防抖和节流。<br />
</div>
</head>
<body>
<style>
.btn{
height: 2000px;
}
</style>
<script>
// 防抖动函数
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate & !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var myEfficientFn = debounce(function() {
console.log("Success真正的操作");
// 滚动中的真正的操作
}, 250);
// 采用了防抖动
window.addEventListener('scroll',myEfficientFn );
// 没采用防抖动
// window.addEventListener('scroll',realFunc);
</script>
</body>
</html>
节流函数优化
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<div class="btn">
防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，<br />
而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。<br />
这个时候，我们希望即使页面在不断被滚动，<br />
但是滚动 handler 也可以以一定的频率被触发（譬如 250ms 触发一次），这类场景，<br />
就要用到另一种技巧，称为节流函数（throttling）。
节流函数，只允许一个函数在 X 毫秒内执行一次。<br />
与防抖相比，节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。<br />
与防抖相比，节流函数多了一个 mustRun 属性，代表 mustRun 毫秒内，必然会触发一次 handler ，<br />
同样是利用定时器，看看简单的示例：s</div>
</head>
<body>
<style>
.btn{
height: 2000px;
pointer-events: none;
}
</style>
<script>
// 简单的节流函数
function throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if(curTime - startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
}else{
timeout = setTimeout(func, wait);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000))
</script>
</body>
</html>
这里是原文地址 希望对你有帮助
