防抖和节流
作为考量代码是否注重优化，可以很强的探知技术深度和个人否追求web性能优化，以及更好的用户体验web职责。
防抖类似延后处理函数，（原定的一直被打断，有点像鬼畜的抽风），节流类似稀释不多解释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>防抖:实时搜索</h3>
<div><input style="width:300px" type="text" placeholder="请输入12345678再删除搜索12345"></div>
<textarea cols="50" rows="15">
document.querySelector('input').addEventListener('input',function(){
console.log(1)
})
</textarea>
<button>点击执行</button>
<h3>防抖:实时搜索优化版</h3>
<div><input style="width:300px" type="text" placeholder="请输入12345678再删除去搜索12345"></div>
<textarea cols="50" rows="15">
<!-- 定时器 -->
let timer;
document.querySelectorAll('input')[1].addEventListener('input',function(){
<!-- 打断预期的执行延后，所以叫debounce防抖 -->
<!-- 自定义500ms -->
clearInterval(timer)
timer=setTimeout(()=>{
<!-- 把原本要做的事延后处理 -->
console.log(2)
},500)
})
</textarea>
<button>点击执行</button>
<h3>
节流
</h3>
<textarea cols="50" rows="15">
<!-- 指定时间端触发,减少代码的执行频率 -->
setInterval(()=>{
window.onscroll=function(){
console.log(3)
}
},1000)
</textarea>
<button>点击执行</button>
</body>
<script>
// 点击button执行pre中的代码，用到eval
document.querySelectorAll('button').forEach(function(item){
item.addEventListener('click',function(){
// 不用箭头函数因为要指向事件点击源，用了()=>变成window了
// console.log(this.previousElementSibling.value);
eval(this.previousElementSibling.value)
})
})
</script>
</html>
网友评论