防抖和节流
在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM操作 , 资源加载等耗费性能的处理,很可能导致界面卡顿,甚至浏览器的崩溃.函数节流和防抖就是为了解决类似需求而应运而生的.
1.1 防抖
场景: 实时搜索 / 拖拽操作
(就好像公交车在站需要等到所有人都上车再发车)
代码示例:
<body>
<input type="text" id="input"></input>
<script>
var oInput = document.getElementById('input');
var timer = null;
function debounce(handler,delay){
var timer = null ;
return function(){
var _that = this;
var _arg = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
handler.apply(_that,_arg)
},delay)
}
}
function ajax(e) {
console.log(e,this.value);
}
oInput.oninput = debounce(ajax,1000)
</script>
</body>
2.1 节流
函数节流就是预定一个函数只有在大于等于执行周期的时候才执行,周期内调用不执行,就好像一颗水滴积攒到一定的重量才会滴落
场景: 窗口调整 / 页面滚动 / 抢购页面疯狂点击
代码示例:
<body>
<div id="show">0</div>
<button id="btn">点我</button>
<script>
var oDiv = document.getElementById('show');
var oBtn = document.getElementById('btn')
function throttle(handler,wait){
var lastTime = 0;
// onclick的事件处理函数
return function(e){
var nowTime = new Date().getTime();
if(nowTime - lastTime > wait){
handler();
lastTime = nowTime;
}
}
}
function buy(e){
console.log(this,e);
//点击增加数
oDiv.innerText = parseInt(oDiv.innerText)+1
}
//一秒钟只允许点一次
oBtn.onclick = throttle(buy,1000)
</script>
</body>
网友评论