9.处理this和防抖、节流

ybi8bo007

于 2023-08-18 16:10:39 发布

阅读量369

点赞数 1

分类专栏：前端——JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_74891783/article/details/132363894

版权

前端——JavaScript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

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>

ybi8bo007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9.处理this和防抖、节流

js处理this和防抖、节流
复制链接

扫一扫

专栏目录