(精华)2020年8月18日 函数防抖、函数节流

函数防抖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数防抖测试</title>
</head>
<body>
<input type="text" id="user_input">&nbsp;
<!-- <button id="btn">搜索</button> -->
<script type="text/javascript">
  
  /*
  * 函数防抖:
  *   概念: 延迟要执行的动作,若在延时的这段时间内,再次触发了,则取消之前开启的动作,重新计时。
  *   举例: 电脑无操作1分钟后会进入休眠,当第40秒时鼠标被移动一下,重新计时1分钟。
  *   实现: 定时器。
  *   应用:搜索时等用户完整输入内容后再发送查询请求。
  * */
  
  let input = document.getElementById('user_input')
  let id
  input.addEventListener('keyup',()=>{
    let data = input.value
    clearTimeout(id)
    id = setTimeout(()=>{
      mockAjax(data)
    },500)
  })
  
  function mockAjax(data) {
    console.log(`sendAjax---------${data}`)
  }

</script>
</body>
</html>

函数节流

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数节流</title>
  <style>
    body {
      height:2000px;
    }
  </style>
</head>
<body>
<script type="text/javascript">
  /*
  * 函数节流:
  *   概念:设定一个特定的时间,让函数在特定的时间内只执行一次,不会频繁执行
  *   举例:fps游戏,鼠标按住不松手,子弹也不会连成一条线
  *   实现:定时器、标识
  *   需求:在鼠标滚轮滚动的时候,每隔2秒钟,打印一次
  *   
  * */
  
  let body = document.getElementsByTagName('body')[0]
  let flag = true
  body.onscroll = ()=>{
    if(flag){
      console.log(1)
      flag = false;
      setTimeout(()=>{
          flag=true;
      },1000)
    }
     
  }

</script>
</body>
</html>
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页