9.处理this和防抖、节流

news2025/1/18 7:42:07

9.1 this指向-普通函数

普通函数的调用方式决定了this的值,即【谁调用this的值 指向谁】
在这里插入图片描述
普通函数没有明确调用者时this值为window,严格模式下没有调用者时this的值为undefined

9.2 this指向-箭头函数

箭头函数中的this与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在this !

1.箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中,一层一层查找this,直到有this的定义
在这里插入图片描述
注意情况1:
在开发中【使用箭头函数前需要考虑函数中this的值】,事件回调函数使用箭头函数时,this 为全局的window
因此DOM事件回调函数如果里面需要DOM对象的this,则不推荐使用箭头函数
在这里插入图片描述
注意情况2:
同样由于箭头函数this的原因,基于原型的面向对象也不推荐采用箭头函数
在这里插入图片描述
箭头函数总结:
1.函数内不存在this,沿用上一级的
2.不适用于 构造函数,原型函数,dom事件函数等等
3.适用于 需要使用上层this的地方

9.3改变this指向

JavaScript中还允许指定函数中this的指向,有3个方法可以动态指定普通函数中this的指向

1.call()-了解
使用call方法调用函数,同时指定被调用函数中this的值
●语法:
在这里插入图片描述
➢thisArg: 在fun函数运行时指定的this值
➢arg1, arg2:传递的其他参数
➢返回值就是函数的返回值,因为它就是调用函数
【示例】

<body>
    <script>
        const obj = {
            name: 'Kai'
        }
        function fn() {
            console.log(this) // obj
        }
        // 调用函数,改变this指向
        fn.call(obj)
    </script>
</body>

2.apply()-理解
使用apply方法调用函数,同时指定被调用函数中this的值
●语法:
在这里插入图片描述
➢thisArg: 在fun函数运行时指定的this值
➢argsArray: 传递的值,必须包含在数组里面
➢返回值就是函数的返回值,因为它就是调用函数
➢因此apply主要跟数组有关系,比如使用Math.max() 求数组的最大值
在这里插入图片描述
【示例】

<body>
    <script>
        const obj = {
            age: 18
        }
        function fn(x, y) {
            console.log(this) // {age: 18}
            console.log(x + y) // 3
        }
        fn.apply(obj, [1, 2])
    </script>
</body>

3.bind()-重点
●bind() 方法不会调用函数。但是能改变函数内部this指向
●语法:
在这里插入图片描述
➢thisArg: 在fun函数运行时指定的this值
➢arg1, arg2:传递的其他参数
➢返回由指定的this值和初始化参数改造的 原函数拷贝(新函数)
➢因此当我们只是想改变this指向,并且不想调用这个函数的时候,可以使用bind,比如改变定时器内部的this指向

在这里插入图片描述
【示例】

<body>
    <button>发送短信</button>
    <script>
        // 有一个按钮,点击后禁用,1s后开启
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            this.disabled = true
            window.setTimeout(function () {
                // 在这个普通函数里,要将this由原来的window 改为 btn
                this.disabled = false
            }.bind(this), 1000)
        })
    </script>
</body>

4.call apply bind 总结
在这里插入图片描述

9.4防抖(debounce)

●防抖:单位时间内,频繁触发事件,只执行最后一次
●使用场景:
➢搜索框搜索输入。只需用户最后一次输入完,再发送请求
➢手机号、邮箱验证输入检测

利用防抖来处理-鼠标滑过盒子显示文字
要求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字才会变化+1
实现方式:

1.lodash提供的防抖来处理
【示例】

<body>
    <div class="box"></div>
    <script src="lodash.min.js"></script>
    <script>
        const box = document.querySelector('.box')
        let i = 1
        function move() {
            box.innerHTML = i++
        }

        // 利用lodash库实现防抖 - 500毫秒后执行+1
        // 语法:_.debounce(fun, 时间)
        box.addEventListener('mousemove', _.debounce(move, 500))
    </script>
</body>

2.手写一个防抖函数来处理
【示例】

<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        let i = 1
        function move() {
            box.innerHTML = i++
        }

        // 手写防抖函数
        // 利用setTimeout实现
        // 1.声明定时器变量
        // 2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器,有就先清除
        // 3.没有则开启定时器
        // 4.定时器里面写函数调用
        function debounce(fn, t) {
            let timer
            // return 返回一个匿名函数
            return function () {
                // 2.3.4
                if (timer) clearTimeout(timer)
                timer = setTimeout(function () {
                    fn()
                }, t)
            }
        }
        box.addEventListener('mousemove', debounce(move, 500))
    </script>
</body>

9.5节流-throttle

●节流:单位时间内,频繁触发事件,只执行一次
●使用场景:
➢高频事件:鼠标移动mousemove、页面尺寸缩放resize、 滚动条滚动scroll等等

1.lodash提供的节流来处理
【示例】

<body>
    <div class="box"></div>
    <script src="lodash.min.js"></script>
    <script>
        const box = document.querySelector('.box')
        let i = 1
        function move() {
            box.innerHTML = i++
        }

        // 利用lodash库实现节流 - 500毫秒后执行 + 1
        // 语法:_.throttle(fun, 时间)
        box.addEventListener('mousemove', _.throttle(move, 500))
    </script>
</body>

2.手写一个节流函数来处理
【示例】

<body>
    <div class="box"></div>
    <script src="lodash.min.js"></script>
    <script>
        const box = document.querySelector('.box')
        let i = 1
        function move() {
            box.innerHTML = i++
        }

        // 手写节流函数 利用setTimeout实现
        // 1.声明定时器变量
        // 2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器,有就不开启新的定时器
        // 3.没有则开启定时器
        // 4.定时器里面写函数调用,定时器里面要把定时器清空
        function throttle(fn, t) {
            let timer = null
            return function () {
                if (!timer) {
                    timer = setTimeout(function () {
                        fn()
                        // 清空定时器
                        // 在 setTimeout 中是无法删除定时器的,因为定时器还在运作
                        // 所以使用timer = null 而不是clearTimeout(timer)
                        timer = null
                    }, t)
                }
            }
        }
        box.addEventListener('mousemove', throttle(move, 500))
    </script>
</body>

3.防抖和节流总结

在这里插入图片描述
在这里插入图片描述

9.6案例-页面打开,可以记录上一次的视频播放位置

两个事件:
1.ontimeupdate事件在视频/音频(audio/video) 当前的播放位置发送改变时触发
2.onloadeddata事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发
【部分代码示例】

<script>
    // 1.获取视频元素
    const video = document.querySelector('video')
    video.ontimeupdate = _.throttle(function () {
      // console.log(video.currentTime) 获得当前的视频时间
      // 把当前的时间存储到本地存储
      localStorage.setItem('now', video.currentTime)
    }, 1000)

    // 2.打开页面触发事件,就从本地存储里取出记录的时间,赋值给video.currentTime
    video.onloadeddata = () => {
      video.currentTime = localStorage.getItem('now') || 0
    }
  </script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/896248.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uni——遍历循环替换值

案例展示 const fraction_json ref([]) //星级数组最终我们需要的格式是&#xff1a; [{“num”: “5”, “evaluate_id”: “2”}, {“num”: “5”, “evaluate_id”: “3”}] 参考的方法&#xff1a; 【 .map() 】方法 map() 方法返回一个新数组&#xff0c;数组中的元素…

究竟什么是位图

引言 为什么要写这篇博文呢&#xff0c;是因为之前面试的时候遇到这样一个问题&#xff1a; 有一款数十亿级别的用户产品&#xff0c;如何统计一周内连续活跃的用户数&#xff1f; 这个问题的特征其实很明显&#xff1a;数据量大&#xff0c;需要交并操作&#xff0c;而且还有…

Postgresql+Postgis安装教程

Windows 下载地址 Postgresql&#xff1a;https://www.enterprisedb.com/downloads/postgres-postgresql-downloads Postgis&#xff1a;https://winnie.postgis.net/download/windows/ 我这里安装Postgresql13&#xff0c;所以对应Postgis也选择pg13版本 首先安装Postgresql…

kali 换源

kali 换源 1.使用root权限打开 vim /etc/apt/sources.list # See https://www.kali.org/docs/general-use/kali-linux-sources-list-repositories/ #deb http://http.kali.org/kali kali-rolling main contrib non-free non-free-firmware# Additional line for source pack…

标签(1)(详解)

目录 标签 部分标签 标签之标题 标题介绍与应用 VSCode插件 标签之段落 换行 水平线 标签之图片 网站中最多的元素 图片路径详解 绝对路径 相对路径 网络路径 标签之超文本链接 超链接描述 超链接属性 超链接表现 标签之文本 常用文本标签 标签 部分标签 …

Linux权限系列--给普通用户添加某个命令的sudo权限

原文网址&#xff1a;Linux权限系列--给普通用户添加某个命令的sudo权限_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Linux系统如何给普通用户添加某个命令的sudo权限。 使用场景 普通开发者可能需要sudo的命令&#xff1a; apt-get&#xff08;经常要安装软件&#x…

《Zookeeper》源码分析(十四)之 投票是如何发送与接收的

目录 MessengerWorkerSenderWorkerReceiver第5步&#xff1a;检验选票的epoch和version第6步&#xff1a;处理投票 Messenger Messenger管理接收到的消息以及待发送的消息&#xff0c;其源码如下&#xff1a; 它的源码比较简单&#xff0c;接下来着重介绍它维护的两个线程&a…

【仿写tomcat】七、项目结构优化以及代码开源

仿写tomcat 项目结构开源地址 项目结构 到目前为止&#xff0c;博主的仿写tomcat就告一段落了&#xff0c;后续有时间了还会继续补充功能&#xff0c;现在的项目结构如下。 在保证功能的前提下作出的改动有&#xff1a; 将各个类中的参数统一成了Config类&#xff0c;通过对…

Java课题笔记~ Ajax

1.1 概述 AJAX (Asynchronous JavaScript And XML)&#xff1a;异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML&#xff0c;JavaScript 表明该技术和前端相关&#xff1b;XML 是指以此进行数据交换。 1.1.1 作用 AJAX 作用有以下两方面&#xff1a; 与服…

百度又开源一款压测工具,可模拟几十亿的并发场景,太强悍了

dperf 是百度开源的一款基于 DPDK 的 100Gbps 网络性能和负载测试软件&#xff0c;能够每秒建立千万级的 HTTP 连接、亿级别的并发请求和数百 Gbps 的吞吐量。 优点 性能强大&#xff1a; 基于 DPDK&#xff0c;使用一台普通 x86 服务器就可以产生巨大的流量&#xff1a;千万…

[oeasy]python0085_[趣味拓展]字体样式_下划线_中划线_闪动效果_反相_取消效果

字体样式 回忆上次内容 \033 xm 可以改变字体样式 0m - 10m 之间设置的 都是字体效果 0m 复原1m 变亮2m 变暗 从3m到10m 又是什么效果 呢&#xff1f;&#xff1f; 真的可以 让文字 blink闪烁吗&#xff1f;&#x1f441; 3m 3m 实现斜体字的效果 4m 4m 对应着下划线 控…

==和equals方法之间的区别,hashcode的理解,String拼接,Spring拆分

==和equals方法之间的区别 字符串有字符串常量池的概念,本身就推荐使用String s="字符串", 这种形式来创建字符串对象, 而不是通过new关键字的方式, 因为可以把字符串缓存在字符串常量池中,方便下次使用,不用遇到new就在堆上开辟一块新的空间 有一对双胞胎姐妹,晓苑…

LabVIEW开发感应电机自动测试台

LabVIEW开发感应电机自动测试台 设计开发先进的电机测试台&#xff0c;能够测试额定功率为0-15hp的单相和三相感应电动机。系统能够测量感应电动机的不同参数&#xff0c;例如电压&#xff0c;电流&#xff0c;有功功率&#xff0c;无功功率&#xff0c;视在功率&#xff0c;功…

有限状态机--实现cp的功能

有限状态机–实现cp的功能 执行的任务 上图是我们想实现的任务&#xff0c;对于A机来说&#xff0c;从fd1读取内容写到fd2&#xff0c;B机要做的是从fd2读取内容写到fd1中。 画出A机的状态。 代码示例 fsm.c #include <stdio.h> #include <stdlib.h> #include …

ShowMeBug CEO李亚飞受邀参加深圳青年创新创业系列沙龙电子信息专场

7月13日下午&#xff0c;由深圳市科技交流服务中心&#xff08;深圳市科技专家委员会办公室&#xff09;主办&#xff0c;深圳新一代产业园承办的“2023深圳青年创新创业系列沙龙——电子信息专场”活动举行。ShowMeBug CEO李亚飞受邀参加此次活动。 深圳市科学技术协会党组成员…

web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程

文章目录 前言一、点聚合是什么&#xff1f;二、开发前准备三、API示例1.引入高德地图2.创建地图实例3.添加标点4.删除标点5.删除所有标点&#xff08;覆盖物&#xff09;6.聚合点7.自定义聚合点样式8.清除聚合9.打开窗体信息 四、实战开发需求要求效果图如下&#xff1a;封装思…

nginx php-fpm安装配置

nginx php-fpm安装配置 nginx本身不能处理PHP&#xff0c;它只是个web服务器&#xff0c;当接收到请求后&#xff0c;如果是php请求&#xff0c;则发给php解释器处理&#xff0c;并把结果返回给客户端。 nginx一般是把请求发fastcgi管理进程处理&#xff0c;fascgi管理进程选…

基于YOLOX的输电线路异物检测算法研究及软件设计_有系统有文献,整体认知蛮好的

我国自改革开放以来&#xff0c;大力发展工业和经济&#xff0c;对电能同样有着巨大的需求&#xff0c;所需求的电能不仅需要保证其数量&#xff0c;还要保障其质量&#xff0c;因此对整个电力系统安全稳定的运行也提出了更高的要求&#xff0c;电力系统发生故障要实时检测并及…

从零做软件开发项目系列之一综论软件项目开发

1 引言 有一个三个泥瓦匠的故事。 三个泥瓦匠在砌墙&#xff0c;一个人走过来&#xff0c;问他们在干什么。   第一个泥瓦匠没好气地说&#xff0c;你没看见吗&#xff1f;我在辛苦地砌墙呢。   第二个回答&#xff0c;我们正在建一座高楼。   第三个则洋溢着喜悦说&…

Vue2子组件修改父组件的方法

Vuex Vuex 是状态管理器&#xff0c;集中式存储管理所有组件的状态。 Vuex速成整理_AYBAIWAN的博客-CSDN博客https://blog.csdn.net/aybaiwan/article/details/131442547?spm1001.2014.3001.5501vuex中this.$store.commit和this.$store.dispatch的用法_老电影故事的博客-CSD…