高阶函数之节流与防抖

最新推荐文章于 2022-12-06 10:16:27 发布

Albert_Tiger

最新推荐文章于 2022-12-06 10:16:27 发布

阅读量188

点赞数

分类专栏： js插件

本文链接：https://blog.csdn.net/qq_35425276/article/details/99688517

版权

js插件专栏收录该内容

81 篇文章 0 订阅

订阅专栏

节流和防抖在我们的日常代码中经常会遇到，下面我们来认识一下节流和防抖的应用场景以及它们的定义。

定义

相同点：两者的前提都是频繁触发
不同点：
节流：是确保函数特定的时间内至多执行一次。
防抖：是函数在特定的时间内不被再调用后执行。

应用场景

节流：鼠标连续多次click事件，mousemove 事件，监听滚动事件，比如是否滑到底部自动加载更多等等…
防抖：输入框搜索自动补全事件，频繁操作点赞和取消点赞等等

防抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">
    <script>
      let input = document.getElementById('name');
      function debonce(func, context, delay){
        return function(){
          let args = [].slice.call(arguments);
          //再次执行时清空定时器，确保只执行一次
          func.id && clearTimeout( func.id );
          func.id = setTimeout( function(){
            func.apply(context,args);
          },delay);
        }
      }
      let debonceAjax = debonce(ajax, null, 2000);
      input.addEventListener('keyup',function(e){
        debonceAjax(e.target.value);
      });
      function ajax(data,type){
        console.log('ajax request ' + data + ' success');
      }
    </script>
</body>
</html>

节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      li {
        height: 50px;
        margin: 20px;
        background: #ccc;
      }
    </style>
</head>
<body>
    <ul id="container"></ul>
    <script>
      let container = document.getElementById('container');
      let lisHtml = '';
      for(let i=0; i<30; i++){
        lisHtml += `<li>我是第 ${i} 个数据</li>`
      }
      container.innerHTML = (lisHtml);
      let throttleAjax = throttle(ajax, 1000);
      document.addEventListener('scroll',function(){
        throttleAjax('newData');
      })
      
      function throttle(fn, delay) {
        let lastTime; 
        let timer; 
        delay || (delay = 300); // 默认间隔为300ms
        return function() {
          let context = this;
          let args = arguments;
          let nowTime = +new Date(); // 获取系统当前的时间
            if (lastTime && nowTime < lastTime+ delay) { // 当前距离上次执行的时间小于设置的时间间隔
                clearTimeout(timer); // 清除定时器
                timer = setTimeout(function() { // delay时间后，执行函数
                  lastTime= nowTime ;
                  fn.apply(context, args);
                }, delay);
              } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
                lastTime= nowTime ;
                fn.apply(context, args);
              }
          };
        }


      function ajax(data){
        console.log('这里是最新数据'+ data)
      }
    </script>
</body>
</html>

节流防抖优化函数

Albert_Tiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高阶函数之节流与防抖

节流和防抖在我们的日常代码中经常会遇到，下面我们来认识一下节流和防抖的应用场景以及它们的定义。定义相同点：两者的前提都是频繁触发不同点：节流：是确保函数特定的时间内至多执行一次。防抖：是函数在特定的时间内不被再调用后执行。应用场景节流：函数节流的应用场景一般是onrize，onscroll等这些频繁触发的函数防抖：输入框搜索自动补全事件，频繁操作点赞和取消点赞等等防抖...
复制链接

扫一扫