防抖与节流

用了lodash.js 的封装【闭包+延迟器】，也可以自己原生写

防抖

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="./js/lodash.js"></script>
  </head>
  <body>
    <div>
      <h1>我是计数器<span>0</span></h1>
      <button>点击我加一</button>
    </div>
  </body>
  <script>
    //节流，指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率
    let span = document.querySelector('span');
    let button = document.querySelector('button');
    let count = 0;
    button.onclick = _.throttle(function () {
      count++;
      span.innerHTML = count;
      console.log('执行');
    }, 2000);
  </script>
</html>

不加防抖：只要输入框数据一直变化，则跟着一直log，

加了防抖：正在输入时候不log，等输入完（“抖完”），按设置的时间后（没有则不需要等待） log。

※回城 ，按多少次，等最后一次才能进行回城状态。

 

节流

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
   <title>Document</title>
    <!-- 引入lodash：lodash全部的功能引入 -->
    <script src="./js/lodash.js"></script>
  </head>
  <body>
    <p>请你输入搜索的内容：<input type="text" /></p>
  </body>
  <script>
    //防抖，指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
    let input = document.querySelector('input');
    input.oninput = _.debounce(function () {
      console.log('ajax发请求');
    }, 2000);
    //lodash插件，里面封装函数的防抖与节流的业务【闭包+延迟期】
  </script>
</html>

不加节流：一直按一直加

加节流：一直按，按设置的时间间隔后才能加

※ 技能CD冷却

 

posted @ 2023-05-17 09:56  GLin生活派  阅读(17)  评论(0)    收藏  举报