【前端学习】—函数节流(九)

【前端学习】---函数节流(九)

一、什么是函数节流

函数节流:规定在一个单位时间内,事件响应函数只能被触发一次,如果这个单位时间内触发多次函数,只有一次生效。

二、函数节流使用场景

  • window.onresize事件
  • mousemove事件
bash 复制代码
<script>
      //window.onresize
      //单位时间内 只触发一次
      //1、返回值是一个函数
      //2 、开启定时器
      //3、如果定时器存在直接返回false
      //4、定时器内部清空定时器 并且把timer置为null,然后执行我们的事件响应函数


      function throttle(fn, interval) {
        let timer;
        return (event) => {
          if (timer) {
            return false;
          }
          timer = setTimeout(() => {
            clearTimeout(timer);
            timer = null;
            fn(event);
          }, interval);
        };
      }

      window.onresize=throttle(function(event){
         console.log(`event`,event);
      },1000)
    </script>


相关推荐
whysqwhw1 分钟前
Hippy 跨平台框架扩展原生自定义组件
前端
OEC小胖胖4 分钟前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
faimi39 分钟前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题
前端·gitlab
悠哉悠哉愿意1 小时前
【数学建模学习笔记】无监督聚类模型:分层聚类
笔记·python·学习·数学建模
北冥电磁电子智能1 小时前
江协科技STM32学习笔记补充之004
笔记·科技·学习
coooliang1 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
程序员码歌1 小时前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
一个响当当的名号2 小时前
c++primer 个人学习总结-模板和泛型编程
开发语言·c++·学习
落羽的落羽2 小时前
【C++】C++11的可变参数模板、emplace接口、类的新功能
开发语言·c++·学习
kk不中嘞2 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架