结合淘宝案例详解防抖和节流

输入框的防抖

1.什么是防抖

防抖策略是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时，王者荣耀的回城

• 能保证事件只被执行一次

2.防抖的应用场景

输入框的防抖;用户在输入框中连续输入一串字符时，可以通过防抖策略，只有在输完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源

3.实现输入框的防抖

• 定义一个防抖的timer
• 定义防抖函数，定时器定时调用
• 在文本框触发keyup事件时，立即清空timer,重新调用防抖函数

代码

 // 1.定义timer
        var timer = null
 //2.定义防抖函数
        function debouncesearch(keywords){
        //  开启一个定时器，返回一个定时器的id
          timer = setTimeout(function () {
            getSuggestList(keywords)
          },500)
        }
 //3.清空timer
      clearTimeout(timer)
 // 4.重新开一个定时器
      debouncesearch(keywords)

修改之前发起五次请求

修改之后发起一次请求

缓存

提升搜索的效率

• 定义一个全局的缓存对象
• 将搜索结果保存到缓存对象中，键值对的形式
• 优先从缓存中获取搜索建议

代码

 //0.定义一个空的对象
        var cacheobj = {};
 //1.获取到用户输入的内容，当做键
          var k = $('#ipt').val().trim()
 //2.需要将数据作为值，进行缓存
          cacheobj[k] = res
 //3.先判断缓存中是否有数据
      if(cacheobj[keywords]){
        return rendersuggestlist(cacheobj[keywords])
      }

输入apple --> apple mac–> apple两次请求

节流

1.什么是节流

节流策略，可以减少一段时间内时间的触发频率，在一个周期里，频繁出发没有用射击游戏里子弹的发射

2.节流的应用场景

• 鼠标连续不断的触发某事件（如点击），只在单位时间内只触发一次。
• 懒加载时要监听计算滚动条的位置，但不必每次滑动，可以降低计算的频率，而不必去浪费cpu资源

3.案例：鼠标跟随效果

• 1.不使用节流实现鼠标跟随效果

代码

img

 $(function () {
 //1.获取图片元素
    var angel = $('#angel')
    //2.监听文档的mousemove时间
    $(document).on('mousemove',function (e) {
      //3.设置图片的位置
      $(angel).css('left',e.pageX+'px').css('top',e.pageY+'px')
    })
  })

节流阀的概念

节流阀为空,表示可以执行下一次操作；不为空,表示不能执行下一次的操作

当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了

每次执行操作前，必须先判断节流阀是否为空

高铁厕所红绿灯

• 使用节流阀优化鼠标跟随效果

代码

//00.预定义一个timer节流阀
    var timer = null
// 02.定义一个延时器
      timer = setTimeout(function () {
        $(angel).css('left',e.pageX+'px').css('top',e.pageY+'px')
      timer = null;
        console.log('o')
      },100)
// 03.判断节流阀是否为空，如果不为空，则证明距离上次执行时间不足100毫秒
      if(timer){
        return
      }

防抖与节流的区别

• 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效，前面的n多次的触发都会被忽略
• 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性的执行一部分事件