JavaScript实战笔记(一) 防抖与节流函数

简介: JavaScript实战笔记(一) 防抖与节流函数

前言


对于某些 高频触发 的事件,如果事件处理函数的调用频率没有限制的话,那么将会大大加重浏览器的负担

这时我们可以采用防抖函数或节流函数,减少事件处理函数的调用频率,同时保证不会影响用户体验


正文


1、防抖函数


(1)描述

在触发事件 n 秒后,才会执行事件处理函数,如果 n 秒内再次触发,那么重新计时

(2)实现

function debounce(handler, delay) {
    var timer = null
    return function () {
        var that = this
        var args = arguments
        if (timer) clearTimeout(timer)
        timer = setTimeout(function() { handler.apply(that, args) }, delay)
    }
}

(3)测试

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debounce</title>
    <script>
        function debounce(handler, delay) { // 防抖函数
            var timer = null
            return function () {
                var that = this
                var args = arguments
                if (timer) clearTimeout(timer)
                timer = setTimeout(function() { handler.apply(that, args) }, delay)
            }
        }
        function show() { // 代理 log 方法
            console.log.apply(console, arguments)
        }
        let debounce_show = debounce(show, 1000)
    </script>
</head>
<body>
    <button onclick="debounce_show('Hello', 'World')">Debounce</button>
</body>
</html>


20210501210431205.gif

2、节流函数


(1)描述

防抖函数有一个问题,假如这个事件一直触发,那么这个事件的处理函数将永远无法执行

而使用节流函数可以解决这个问题,当持续触发事件时,节流函数可以保证一定时间内调用一次处理函数


(2)实现

function throttle(handler, waitTime) {
    var timer = null
    var lastTime = Date.now()
    return function () {
        var that = this
        var args = arguments
        var currTime = Date.now()
        var remaining = waitTime - (currTime - lastTime)
        if (timer) clearTimeout(timer)
        if (remaining <= 0) {
            handler.apply(that, args)
            lastTime = Date.now()
        } else {
            timer = setTimeout(function() { handler.apply(that, args) }, waitTime)
        }
    }
}

(3)测试

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debounce</title>
    <script>
        function throttle(handler, waitTime) { // 节流函数
            var timer = null
            var lastTime = Date.now()
            return function () {
                var that = this
                var args = arguments
                var currTime = Date.now()
                var remaining = waitTime - (currTime - lastTime)
                if (timer) clearTimeout(timer)
                if (remaining <= 0) {
                    handler.apply(that, args)
                    lastTime = Date.now()
                } else {
                    timer = setTimeout(function() { handler.apply(that, args) }, waitTime)
                }
            }
        }
        function show() { // 代理 log 方法
            console.log.apply(console, arguments)
        }
        let throttle_show = throttle(show, 1000)
    </script>
</head>
<body>
    <button onclick="throttle_show('Hello', 'World')">Throttle</button>
</body>
</html>


20210501210443330.gif


目录
相关文章
|
2天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
1天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
1天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
2天前
|
JavaScript 前端开发 网络架构
函数柯里化:JavaScript中的高级技巧
函数柯里化:JavaScript中的高级技巧
|
2天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
2天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
2天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
3天前
|
XML JavaScript 前端开发
【JavaScript】实战训练小项目-WebAPI
【JavaScript】实战训练小项目-WebAPI
10 1
|
3天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
3天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
11 0