<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>事件节流与防抖</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body style="height:3000px;">
<div id="ulHtml">
</div>
<!-- 设计模式里的虚拟代理 实现 -->
<!-- 像scroll,resize,keyup等事件频繁触发会引发页面的抖动甚至卡顿 -->
<script >
function scrollHander(a,b){
console.log(a);
console.log('ppp');
}
/*防抖方式一*/
// function debounce(fun){
// clearTimeout(fun.tid);
// fun.tid = setTimeout(function(){
// fun();
// },300);
// }
// window.onscroll = function(){
// debounce(scrollHander);
// }
/*防抖方式二 推荐*/
function debounce2(fn,delay){
var timer = null;
return function(){
var arg = arguments;//获取传入的函数
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(this,arg); // 推荐使用apply(this,参数数组)
// fn.call(this,a1,a2);
},delay || 300)
}
}
var proxyfun = debounce2(scrollHander,500);
window.onscroll = function(){
proxyfun('laney','uu');
}
/*字符串拼接*/
var arrItem = ['aa','bb','cc','dd'];
// 方式一
// var itemStr = '';
// arrItem.forEach(function(item,index){
// itemStr +='<li>'+item+'</li>'
// })
// console.log(itemStr);
// document.getElementById('ulHtml').innerHTML = itemStr;
// Array.prototype.join 推荐
var itemNew = [];
arrItem.forEach(function(item,index){
// itemNew.push('<li>'+item+'</li>');
itemNew.push('<li tag='+index+'>',item,'</li>')
});
document.getElementById('ulHtml').innerHTML = itemNew.join('');
/*事件委托*/
// 监听li
// var allli = document.getElementById('ulHtml').querySelectorAll('li');
// for(let i=0,len=allli.length;i<len;i++) {
// allli[i].addEventListener('click',function(){ //监听点击li
// console.log(i);
// })
// }
//监听外层 推荐
document.getElementById('ulHtml').addEventListener('click',function(e){
//e.target被点击的元素<li>aa</li>
var target = e.target;
if(target && target.tagName.toLocaleLowerCase()=='li') {
//找到元素, 写业务逻辑代码
var tag = target.getAttribute('tag');
console.log(tag);
}
})
</script>
</body>
</html>
前端性能优化之事件节流与防抖
猜你喜欢
转载自blog.csdn.net/weixin_42549581/article/details/101041359
今日推荐
周排行