JavaScript：闭包、防抖与节流

devtools/2024/10/20 7:35:09/

一，闭包

1，什么是闭包

闭包是指一个函数和其周围的词法环境(lexical environment)的组合。
换句话说，闭包允许一个函数访问并操作函数外部的变量。

闭包的核心特性:

  1. 函数内部可以访问外部函数的变量
  2. 即使外部函数已经返回，内部函数仍然可以访问这些变量
  3. 闭包可以保护变量不被垃圾回收机制回收

一个简单的例子：

javascript">function outerFunction(x) {let y = 10function innerFunction() {// 内部函数innerFunction可以访问外部函数outerFunction的变量yconsole.log(x + y)}// 外部函数outerFunction返回内部函数innerFunctionreturn innerFunction
}const closure = outerFunction(5)closure()   // 输出: 15
// 即使outerFunction已经执行完毕，但是closure仍然可以访问 x 和 y 的值
closure()   // 输出: 15

在这个例子中:

  • outerFunction 返回了 innerFunction
  • innerFunction 形成了一个闭包，它可以访问 outerFunction 的参数 x 和局部变量 y
  • 即使 outerFunction 已经执行完毕，closure 仍然可以访问 x 和 y

2，闭包的应用场景

1，数据隐私：闭包可以用来创建私有变量和方法

javascript">function createCounter() {let count = 0;return {increment: function() { count++; },getCount: function() { return count; }};
}const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 输出: 1
console.log(counter.count); // 输出: undefined

2，函数工厂：闭包可以用来创建定制的函数

javascript">function multiplyBy(factor) {return function(number) {return number * factor;};
}const double = multiplyBy(2);
console.log(double(5)); // 输出: 10

3，模块化代码：闭包可以用于实现模块模式，封装私有状态和行为

javascript">const module = (function() {let privateVariable = 0;function privateFunction() {console.log('私有函数');}return {publicMethod: function() {privateVariable++;privateFunction();},getPrivateVariable: function() {return privateVariable;}};
})();module.publicMethod();
console.log(module.getPrivateVariable()); // 输出: 1

3，注意事项

1，内存管理：闭包会保持对其外部作用域的引用，这可能导致内存泄漏。

javascript">// 潜在的内存泄漏
function createLargeArray() {let largeArray = new Array(1000000).fill('some data');return function() {console.log(largeArray[0]);};
}let printArrayItem = createLargeArray(); // largeArray 会一直存在于内存中// 解决方式1：在不需要时解除引用
printArrayItem = null; // 现在 largeArray 可以被垃圾回收// 解决方式2：立即执行函数表达式(IIFE)来限制闭包的生命周期
(function() {let largeArray = new Array(1000000).fill('some data');console.log(largeArray[0]);
})(); // largeArray 在函数执行后立即可以被回收

2，循环中创建闭包：闭包会捕获循环变量的最终值,而不是每次迭代的值。

javascript">// 闭包会捕获循环变量的最终值,而不是每次迭代的值
for (var i = 1; i <= 5; i++) {setTimeout(function() {console.log(i);}, i * 1000);
}// 解决方法：
// 1. 使用 let 替换 var
// 2：使用立即执行函数创建新的作用域
for (var i = 1; i <= 5; i++) {(function(j) {setTimeout(function() {console.log(j);}, j * 1000);})(i);
}

3，性能考虑：过度使用可能会影响性能，每个闭包都会占用内存，并且可能影响垃圾回收。在性能敏感的应用中应谨慎使用闭包。

4，this 绑定问题：在闭包中,this 的值可能会出人意料。

javascript">const obj = {value: 'Hello',sayHello: function() {setTimeout(function() {console.log(this.value);}, 1000);}
};obj.sayHello(); // 输出: undefined

sayHello 方法内部的 setTimeout 使用了一个普通的函数（ function() { … } ），而不是箭头函数。普通函数的 this 关键字在运行时是根据调用上下文来确定的，而不是根据定义时的上下文。
在 setTimeout 的回调函数中， this 不再指向 obj ，而是指向全局对象（在浏览器中是 window ），或者在严格模式下是 undefined 。因此，当你尝试访问 this.value 时，它实际上是在访问全局对象的 value 属性，而全局对象并没有 value 属性，所以输出为 undefined 。
只需要改用箭头函数，因为箭头函数不会创建自己的 this ，它会捕获外部上下文的 this 值：

javascript">const obj = {value: 'Hello',sayHello: function() {setTimeout(() => {console.log(this.value);}, 1000);}
};
obj.sayHello(); // 输出: Hello

二，防抖

防抖的核心思想是，在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。这可以使得连续的函数调用变为一次。

在这里插入图片描述

举个例子：

javascript">function debounce(func, delay) {let timer = null;return function(...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);}
}// Usage
const expensiveOperation = debounce(() => {console.log('Expensive operation')
}, 500)expensiveOperation()
  • 在 debounce 函数中， timer 变量是在 debounce 函数的作用域内定义的。返回的函数（即 function (…args) ）可以访问 timer 变量，因此每次调用返回的函数时，它都可以使用和修改 timer ，从而实现防抖的效果。

在搜索框输入查询、表单验证、按钮提交事件、浏览器窗口缩放resize事件中的应用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Debounce Demo</title><style>body {font-family: Arial, sans-serif;max-width: 600px;margin: 0 auto;padding: 20px;}.section {margin-bottom: 20px;padding: 10px;border: 1px solid #ddd;border-radius: 5px;}input, button {margin: 5px 0;padding: 5px;}#email-error {color: red;}</style>
</head>
<body><h1>Debounce Demo</h1><div class="section"><h2>1. Search Input</h2><input type="text" id="search-input" placeholder="Search..."><div id="search-results"></div></div><div class="section"><h2>2. Email Validation</h2><input type="email" id="email-input" placeholder="Enter email"><div id="email-error"></div></div><div class="section"><h2>3. Submit Button</h2><button id="submit-button">Submit</button><div id="submit-result"></div></div><div class="section"><h2>4. Window Resize</h2><div id="window-size"></div></div><script>javascript">// Debounce functionfunction debounce(func, delay) {let timer = null;return function(...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);}}// 1. Search Inputconst searchInput = document.getElementById('search-input');const searchResults = document.getElementById('search-results');const debouncedSearch = debounce(function(query) {console.log(`Searching for: ${query}`);searchResults.textContent = `Results for: ${query}`;}, 300);searchInput.addEventListener('input', function(e) {debouncedSearch(e.target.value);});// 2. Email Validationconst emailInput = document.getElementById('email-input');const emailError = document.getElementById('email-error');const debouncedValidateEmail = debounce(function(email) {const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);emailError.textContent = isValid ? '' : 'Invalid email format';}, 500);emailInput.addEventListener('input', function(e) {debouncedValidateEmail(e.target.value);});// 3. Submit Buttonconst submitButton = document.getElementById('submit-button');const submitResult = document.getElementById('submit-result');const debouncedSubmit = debounce(function() {console.log('Form submitted');submitResult.textContent = 'Form submitted at ' + new Date().toLocaleTimeString();}, 1000);submitButton.addEventListener('click', debouncedSubmit);// 4. Window Resizeconst windowSize = document.getElementById('window-size');const debouncedResize = debounce(function() {const size = `${window.innerWidth}x${window.innerHeight}`;console.log(`Window resized to: ${size}`);windowSize.textContent = `Window size: ${size}`;}, 250);window.addEventListener('resize', debouncedResize);// Initial call to set the initial window sizedebouncedResize();</script>
</body>
</html>

三，节流

节流的核心思想是，在一个单位时间内，只能触发一次函数。如果在单位时间内触发多次函数，只有一次生效。

在这里插入图片描述

防抖和节流的主要区别:

  • 防抖是在最后一次事件触发后才执行函数，而节流是在一定时间内只执行一次。
  • 防抖适合用于用户输入验证等需要等待用户操作完成的场景，而节流适合用于限制持续触发事件的频率。

举个例子：

javascript">function throttle(func, delay) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime >= delay) {func.apply(this, args);lastTime = now;}}
}// Usage
const expensiveOperation = throttle(() => {console.log('Expensive operation')
}, 1000)expensiveOperation()

在滚动加载更多、按钮点击事件、DOM元素拖拽、Canvas画笔中的应用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Throttle Demo</title><style>body {font-family: Arial, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;}.section {margin-bottom: 20px;padding: 10px;border: 1px solid #ddd;border-radius: 5px;}#scroll-container {height: 200px;overflow-y: scroll;border: 1px solid #ccc;padding: 10px;}#drag-container {width: 300px;height: 100px;background-color: #f0f0f0;position: relative;}#draggable {width: 50px;height: 50px;background-color: #3498db;position: absolute;cursor: move;}#canvas {border: 1px solid #000;}</style>
</head>
<body><h1>Throttle Demo</h1><div class="section"><h2>1. Scroll Loading</h2><div id="scroll-container"><div id="scroll-content"></div></div></div><div class="section"><h2>2. Button Click</h2><button id="click-button">Click Me Rapidly</button><div id="click-result"></div></div><div class="section"><h2>3. Drag Element</h2><div id="drag-container"><div id="draggable"></div></div><div id="drag-result"></div></div><div class="section"><h2>4. Canvas Drawing</h2><canvas id="canvas" width="300" height="200"></canvas></div><script>javascript">// Throttle functionfunction throttle(func, limit) {let inThrottle;return function(...args) {if (!inThrottle) {func.apply(this, args);inThrottle = true;setTimeout(() => inThrottle = false, limit);}}}// 1. Scroll Loadingconst scrollContainer = document.getElementById('scroll-container');const scrollContent = document.getElementById('scroll-content');let itemCount = 20;function addItems(count) {for (let i = 0; i < count; i++) {const item = document.createElement('p');item.textContent = `Item ${itemCount++}`;scrollContent.appendChild(item);}}const throttledScroll = throttle(function() {if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight - 50) {console.log('Loading more items...');addItems(10);}}, 500);scrollContainer.addEventListener('scroll', throttledScroll);addItems(20); // Initial items// 2. Button Clickconst clickButton = document.getElementById('click-button');const clickResult = document.getElementById('click-result');let clickCount = 0;const throttledClick = throttle(function() {clickCount++;clickResult.textContent = `Button clicked ${clickCount} times`;}, 1000);clickButton.addEventListener('click', throttledClick);// 3. Drag Elementconst draggable = document.getElementById('draggable');const dragResult = document.getElementById('drag-result');let isDragging = false;draggable.addEventListener('mousedown', () => isDragging = true);document.addEventListener('mouseup', () => isDragging = false);const throttledDrag = throttle(function(e) {if (isDragging) {const containerRect = draggable.parentElement.getBoundingClientRect();let x = e.clientX - containerRect.left - draggable.offsetWidth / 2;let y = e.clientY - containerRect.top - draggable.offsetHeight / 2;x = Math.max(0, Math.min(x, containerRect.width - draggable.offsetWidth));y = Math.max(0, Math.min(y, containerRect.height - draggable.offsetHeight));draggable.style.left = `${x}px`;draggable.style.top = `${y}px`;dragResult.textContent = `Position: (${x.toFixed(0)}, ${y.toFixed(0)})`;}}, 50);document.addEventListener('mousemove', throttledDrag);// 4. Canvas Drawingconst canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');let isDrawing = false;let lastX = 0;let lastY = 0;canvas.addEventListener('mousedown', (e) => {isDrawing = true;[lastX, lastY] = [e.offsetX, e.offsetY];});canvas.addEventListener('mouseup', () => isDrawing = false);canvas.addEventListener('mouseout', () => isDrawing = false);const throttledDraw = throttle(function(e) {if (!isDrawing) return;ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();[lastX, lastY] = [e.offsetX, e.offsetY];}, 20);canvas.addEventListener('mousemove', throttledDraw);</script>
</body>
</html>

http://www.ppmy.cn/devtools/127223.html

相关文章

Android IP路由策略和防火墙

Android IP路由策略和防火墙

Android IP路由策略和防火墙 Platform: RK3368 OS: Android 6.0 Kernel: 3.10.0 文章目录 Android IP路由策略和防火墙ip route, ip rule, iptables简介ip routeip ruleiptables Android路由策略Android路由策略优先级命令查看当前路由策略 Android路由表命令查看路由表命令…
阅读更多...
【分布式微服务云原生】探索负载均衡的艺术：深入理解与实践指南

【分布式微服务云原生】探索负载均衡的艺术：深入理解与实践指南

探索负载均衡的艺术&#xff1a;深入理解与实践指南 摘要&#xff1a; 在本文中&#xff0c;我们将深入探讨负载均衡的概念、重要性以及实现负载均衡的多种算法。通过详细的技术解析、Java代码示例、流程图和对比表格&#xff0c;您将了解如何选择合适的负载均衡策略来优化资源…
阅读更多...
[C++] C++类和对象 类的初始化列表和静态成员 类型转换/友元/内部类/匿名对象/编译器优化

[C++] C++类和对象 类的初始化列表和静态成员 类型转换/友元/内部类/匿名对象/编译器优化

目录 构造函数 1.1 构造函数赋值 1.2 初始化列表 1.3 explicit 关键字 2.类的静态成员 2.1 静态成员函数 2.2 静态成员变量 4.友元 4.1.友元函数 4.2.友元类 5. 内部类 5.1 内部类的概念及特性 构造函数 1.1 构造函数赋值 构造函数是在对象创建时由编译器自动调用…
阅读更多...
Golang | Leetcode Golang题解之第491题非递减子序列

Golang | Leetcode Golang题解之第491题非递减子序列

题目&#xff1a; 题解&#xff1a; var (temp []intans [][]int )func findSubsequences(nums []int) [][]int {ans [][]int{}dfs(0, math.MinInt32, nums)return ans }func dfs(cur, last int, nums []int) {if cur len(nums) {if len(temp) > 2 {t : make([]int, len(…
阅读更多...
Linux 内核态，用户态，以及如何从内核态到用户态，交互方式有哪些

Linux 内核态，用户态，以及如何从内核态到用户态，交互方式有哪些

一、Linux 内核态&#xff0c;用户态 Linux 内核态&#xff0c;用户态&#xff0c;以及如何从内核态到用户态&#xff0c;我来说下我的理解 很多面试官&#xff0c;面试也是照搬照套&#xff0c;网上找的八股文面试题&#xff0c;面试的人也是背八股文&#xff0c;刚好背到了&…
阅读更多...
【日志】关于多益网申

【日志】关于多益网申

2024.10.19 早先听闻多益的测试题非常抽象&#xff0c;凡是测过的人都说太抽象了&#xff0c;我还以为他考我各种算法或者编程语言呢。我今天也去做了一下&#xff0c;测试题里面大多都考些计算题&#xff0c;找规律题&#xff0c;判断推理题&#xff0c;还有一些图形转换&…
阅读更多...
Redis内存淘汰机制！

Redis内存淘汰机制！

文章目录 引言内存淘汰策略noevictionallkeys-lruvolatile-lruallkeys-randomvolatile-randomvolatile-ttlvolatile-lfuallkeys-lfu 配置内存淘汰策略实现原理LRU 算法LFU 算法TTL 策略 应用场景性能优化监控与调优实际案例案例 1&#xff1a;社交媒体动态缓存案例 2&#xff1…
阅读更多...
rom定制系列------小米6x_MIUI14_安卓13刷机包修改写入以及功能定制 界面预览

rom定制系列------小米6x_MIUI14_安卓13刷机包修改写入以及功能定制 界面预览

在接待一些定制化系统中。有很多工作室或者一些特殊行业的友友需要在已有固件基础上简略修改其中的功能。方便使用。例如usb调试默认开启。usb安装设置以及usb安装与内置删减一些app的定制服务。今天给友友预览其中小米6X此款机型定制相关的一些界面与功能演示。 定制机型以及…
阅读更多...
最新文章

Copyright @ 2022~2023