<!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>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)