防抖与节流

造梦者FZ

已于 2022-07-24 17:37:52 修改

阅读量168

点赞数

分类专栏： javascript简单入门案例前端面试题文章标签： javascript html html5 jquery

于 2020-10-30 17:30:04 首次发布

本文链接：https://blog.csdn.net/qq_43923146/article/details/109389686

版权

javascript简单入门案例同时被 2 个专栏收录

23 篇文章 2 订阅

订阅专栏

前端面试题

7 篇文章 0 订阅

订阅专栏

防抖

比如在百度搜索时，input事件并不会一直触发，会在你停止输入后2s左右触发。这就叫事件防抖

下面是简单小实例

<!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>
    <input type="text" />
</body>
</html>
<script>
  
  function antishake(fn,wait){
    let timeOut=null
    return function(){
        if(timeOut){
            clearTimeout(timeOut)
        }
        timeOut=setTimeout(fn,wait)
    }
  }
  let telInput=document.querySelector('input')
  telInput.addEventListener('input',antishake(demo,200))

  function demo(){
    console.log('发起请求')
  }
</script>

节流

使用场景：例如在提交表单时网络卡顿，某些手残党不停的疯狂点击提交按钮，会导致每点击一次就发一次请求，这样就会发无数次请求。那么就要让几秒之内只提交一次。这就是节流

下面是用鼠标滑动举例，在鼠标滑动时，每两秒发一次请求。

<!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>
<style>
    .box{
        width: 300px;
        height: 300px;
        background-color: aqua;
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>
<script>
  let box =document.querySelector('.box')
  box.addEventListener('mousemove',throttle(demo,2000))
  //封装节流
  function throttle(event,time){
    let timer=null
    return function(){
        if(!timer){
            timer=setTimeout(()=>{
                event()
                timer=null
            },time)
        }
    }
  }
  function demo(){
    console.log('发起请求')
  }
</script>