防抖和节流

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效(间隔时间，延迟触发)
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时（节约性能，只触发最后一次）

防抖

思路：

1. 事件函数执行,先创建个定时器

2. 把逻辑代码放到定时器中

3. 当函数再次触发,清除定时器

4. 创建—个新定时器即司

基础使用：

// 问题: 搜索框只要改变就马上触发函数 执行ajax请求
      // 实际: 用户只想搜索adidas (a, ad, adi, adid.. 但是每个字母都触发了一次网络请求(浪费资源流量/性能不高))
      // 防抖函数目的: 提高性能(优化体验)
      // 1. 把逻辑代码装入定时器中，设置延迟时间
      // 2.清空上一次定时器
      let timer = null;
      $("#ipt").on("input", function () {
          clearTimeout(timer)
          timer = setTimeout(() =>{
              var kw = $(this).val();
              console.log(kw)
              // 后面发送请求
          },500)   
      });

高级封装：

$("#ipt").on("input", debounce(function(){
           console.log($(this).val())
        },500))
              

       function debounce(fn,delay) {
           let timer = null;
           return function() { // 真正的事件处理函数，this：事件的触发者
               clearTimeout(timer);
               timer = setTimeout(() => {
                   fn.call(this)  // 将事件触发者的this返回
               },delay)
           }
       }

节流

思路：

1. 事件函数执行,先判断有定时器,则直接return
2. 把逻辑代码放到定时器中
3. 定时器执行后,置空定时器变量
4. 下载事件函数执行时,再创建一个新定时器即可

高级封装：

$(document).on('scroll',throttle(function(){
           // 代码逻辑
       },500))

       function throttle(fn,delay) {
           return function () {
               if(fn.t) return // 如果有定时器，就停止运行
               fn.t = setTimeout( () => {
                   fn.call(this)   // 确保上面函数中this关键词是事件源
                   fn.t = null  // 置空，让事件再次书法的时候，重新创建一个定时器
               },delay)
           }
       }

应用场景

防抖在连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能