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

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

一、什么是函数节流

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

二、函数节流使用场景

  • 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>


相关推荐
王俊山IT11 分钟前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习
小政爱学习!15 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。21 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼27 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093331 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
Mephisto.java1 小时前
【大数据学习 | kafka高级部分】kafka中的选举机制
大数据·学习·kafka
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax