JS 节流与防抖-CFANZ编程社区

JS 节流与防抖

防抖：

用户触发事件，时间频繁，只处理最后一次事件的操作

举个例子，打印输入框输入的内容时，每次有内容都会直接打印一次，而不是直接打印最终的结果。


<body>
<input type="text">
<script>
//打印输入框的内容
let inp = document.querySelector('input');
inp.oninput = function(){
  console.log(this.value)
}
</script>
</body>

而我们要做的防抖，就是要让他做到直接打印最后的内容

函数防抖，借助setTimeout()函数，延迟执行需要执行的代码

<body>
<input type="text">
<script>
//打印输入框的内容
let inp = document.querySelector('input');
let tim = null;
inp.oninput = function(){
  if(tim !== null){
    clearTimeout(tim)
  }
 tim = setTimeout(()=>{
   console.log(this.value)
 },1000)
}
</script>
</body>

节流：

节流可以用于控制高频事件执行的次数

举个例子，在窗口滚动的时候，触发事件


<script>
//给body设置高度，出现滚动条 方便操作
document.body.style.height = '2000px';
//滚动时触发事件
window.onscroll = function(){
  console.log("hello world")
}
</script>

可以看到，从顶部滚动到底部打印了45次‘hello world’，我们可以通过节流，控制打印的频率

<script>
//给body设置高度，出现滚动条 方便操作
document.body.style.height = '2000px';
//滚动时触发事件
let flag = true;
window.onscroll = function() {
  if (flag) {
    setTimeout(() => {
      console.log("hello world")
      flag = true
    }, 500)
    flag = false
  }
}
</script>

0 条评论