1、闭包、防抖、节流

简介: 1、闭包、防抖、节流

1、什么是闭包


简单来说就是,函数嵌套函数,内部的函数就是闭包。当我们想访问内部函数的时候,我们是不能够直接访问的,所以需要在外面函数设置一个返回值,把内部函数作为返回值返回出来。这样外部环境就可以使用内部函数,也就是闭包。正常一个函数被执行完毕时,里面的变量就会被销毁。但闭包不是,虽然外部函数已经执行完毕,但内部函数赋值给了外部的变量,内部函数还没有被执行完,它还存储在内存空间中,所以外部函数的内容空间没有被销毁,外部函数的变量保存了下来。


    function outerFun() {
      let num = 10;
      function innerFun() {
        console.log(num);
      }
      return innerFun;
    }
    // 全局环境下拿到内部函数,相等于fun:innerFun
    let fun = outerFun();
    // 直接调用内部函数
    fun();


2、什么是防抖?


  • 用户触发事件过于频繁,我们只需要最后一次事件的操作即可


  //  1、防抖:用户触发事件过于频繁,只需要最后一次事件的操作
  let dataInput = document.querySelector('input');
  dataInput.oninput = antiShake(function () {
    console.log(this.value);
  }, 2000);
  //  2、封装防抖
  function antiShake(fn, wait) {
    let timeOut = null;
    return function () {
      if (timeOut) clearTimeout(timeOut);
      //  用call把this指针指向input
      timeOut = setTimeout(() => { fn.call(this); }, wait);
    }
  }

3、什么是节流?


  • 用户触发事件过于频繁,控制每隔多少秒发生一次;例如,表单提交
//  3、节流:用户触发事件过于频繁,控制每隔多少秒发生一次;例如,表单提交
  let submit = document.querySelector('button');
  let click = true;
  submit.onclick = throttle(function () {
    console.log('hello world');
    click = true;
  }, 2000);
  //  4、封装节流
  function throttle(fn, wait) {
    return function () {
      if (click) {
        setTimeout(() => {
          fn();
        }, wait)
      }
      click = false;
    }
  }


相关文章
|
5月前
|
监控 前端开发 Java
Spring拦截链的实现原理是什么?
拦截器是Spring MVC中处理请求的重要机制,通过拦截链可在请求的不同阶段插入自定义逻辑。本文详解拦截链的实现原理、核心组件如HandlerMapping、HandlerAdapter、DispatcherServlet和HandlerInterceptor的作用,以及拦截器在请求处理中的工作流程。了解这些内容有助于开发者更好地掌握Spring MVC的请求处理机制,并灵活应用于权限验证、日志记录等场景。
103 1
|
6月前
|
XML Android开发 数据格式
Android利用selector(选择器)实现图片动态点击效果
本文介绍了Android中ImageView的`src`与`background`属性的区别及应用,重点讲解如何通过设置背景选择器实现图片点击动态效果。`src`用于显示原图大小,不拉伸;`background`可随组件尺寸拉伸。通过创建`selector_setting.xml`,结合`setting_press.xml`和`setting_normal.xml`定义按下和正常状态的背景样式,提升用户体验。示例代码展示了具体实现步骤,包括XML配置和形状定义。
301 3
Android利用selector(选择器)实现图片动态点击效果
|
关系型数据库 MySQL 数据库连接
DBeaver如何连接一个数据库
【10月更文挑战第27天】DBeaver 是一款功能强大的通用数据库管理工具,支持多种主流数据库。本文介绍了使用 DBeaver 连接数据库的基本步骤,包括下载安装、创建新连接、选择数据库类型、配置连接参数、测试连接以及最终连接到数据库。详细的操作指南帮助用户轻松管理和操作数据库。
3643 9
|
机器学习/深度学习 自然语言处理 计算机视觉
Claude 3系列包含Haiku(低)、Sonnet(中)和Opus(高)三个模型
Claude 3系列包含Haiku(低)、Sonnet(中)和Opus(高)三个模型
1025 7
|
开发工具 git
【分支管理】远程分支删除后在本地还能看到的解决办法
【分支管理】远程分支删除后在本地还能看到的解决办法
|
Android开发 iOS开发 容器
Android Studio App开发入门之选择按钮的讲解及使用(包括复选框,开关按钮,单选按钮,附源码)
Android Studio App开发入门之选择按钮的讲解及使用(包括复选框,开关按钮,单选按钮,附源码)
605 0
|
XML 测试技术 API
【Android开发日常】一文弄懂桌面图标快捷菜单 & 桌面小组件
开发可以定义快捷方式,以便在应用中执行特定操作。 这些快捷方式可在受支持的启动器或助理(如 Google 助理)中显示,方便用户快速启动应用中的常见任务或推荐任务。 通过本文你还将了解一些可提升快捷方式效果的最佳做法。
2076 1
|
关系型数据库 MySQL 开发工具
Mac安装和卸载mysql5.7
Mac安装和卸载mysql5.7
676 0