要让JavaScript中的一行代码只执行一次，你可以使用多种方法，比如使用标志变量、IIFE（立即调用的函数表达式）和闭包。 其中，使用标志变量是最常见和直接的方法。标志变量的概念很简单：你创建一个变量来记录代码是否已经执行过，如果已经执行过，就不再执行。
例如，假设你有一行代码 doSomething();，你可以使用标志变量来确保它只执行一次：
let hasExecuted = false;
if (!hasExecuted) {
doSomething();
hasExecuted = true;
}
在这个例子中，代码 doSomething(); 只会在 hasExecuted 为 false 时执行一次，并在执行后将 hasExecuted 设置为 true，防止它再次执行。
一、使用标志变量
使用标志变量是一种最常见且简单的方式来确保一行代码只执行一次。标志变量在很多情况下都非常有效，特别是当你需要在多个地方检查代码是否已经执行过时。
1. 基本实现
在JavaScript中，标志变量的基本实现非常简单。你可以创建一个布尔变量来记录代码是否已经执行。
let hasExecuted = false;
function executeOnce() {
if (!hasExecuted) {
console.log("This will only log once");
hasExecuted = true;
}
}
// 调用函数
executeOnce(); // 输出: This will only log once
executeOnce(); // 无输出
2. 应用场景
标志变量在许多实际应用中都非常有用，比如在初始化代码、设置事件监听器或者执行一次性操作时。
let isInitialized = false;
function initializeApp() {
if (!isInitialized) {
// 初始化操作
console.log("App initialized");
isInitialized = true;
}
}
// 调用初始化函数
initializeApp(); // 输出: App initialized
initializeApp(); // 无输出
二、使用IIFE（立即调用的函数表达式）
IIFE是一种更高级的技术，它不仅能确保代码只执行一次，还能创建一个独立的作用域，避免变量污染全局作用域。
1. 基本实现
IIFE的语法稍微复杂一些，但它非常强大。
(function() {
console.log("This will only log once");
})();
这个代码块会立即执行，并且只执行一次。你也可以在IIFE内部创建变量和函数，它们不会污染全局作用域。
2. 应用场景
IIFE在许多高级应用中非常有用，比如在模块化代码、一次性初始化操作等场景中。
const myModule = (function() {
let privateVar = "I am private";
function privateFunction() {
console.log(privateVar);
}
return {
publicFunction: function() {
privateFunction();
}
};
})();
myModule.publicFunction(); // 输出: I am private
三、使用闭包
闭包是一种更高级的技术，它允许你创建一个函数，该函数可以记住其词法作用域，即使这个函数在其词法作用域之外被调用。
1. 基本实现
闭包通常和IIFE结合使用，以确保代码只执行一次。
const executeOnce = (function() {
let hasExecuted = false;
return function() {
if (!hasExecuted) {
console.log("This will only log once");
hasExecuted = true;
}
};
})();
executeOnce(); // 输出: This will only log once
executeOnce(); // 无输出
2. 应用场景
闭包在许多高级应用中非常有用，比如在事件处理、延迟执行等场景中。
const createOnceHandler = function() {
let hasExecuted = false;
return function() {
if (!hasExecuted) {
console.log("Event handled");
hasExecuted = true;
}
};
};
const handleClickOnce = createOnceHandler();
document.getElementById("myButton").addEventListener("click", handleClickOnce);
四、使用ES6的Set对象
ES6引入了Set对象，它可以用于确保某些代码只执行一次。Set对象存储唯一值，你可以利用这个特性来追踪已经执行的代码。
1. 基本实现
Set对象允许你存储唯一值，无论值是什么类型。
const executedSet = new Set();
function executeOnce(key) {
if (!executedSet.has(key)) {
console.log("This will only log once for key:", key);
executedSet.add(key);
}
}
executeOnce("task1"); // 输出: This will only log once for key: task1
executeOnce("task1"); // 无输出
2. 应用场景
Set对象在需要确保某些任务或代码片段只执行一次时非常有用，特别是在处理复杂的应用逻辑时。
const initTasks = new Set();
function initializeTask(taskName) {
if (!initTasks.has(taskName)) {
console.log(`Initializing ${taskName}`);
initTasks.add(taskName);
}
}
initializeTask("TaskA"); // 输出: Initializing TaskA
initializeTask("TaskA"); // 无输出
initializeTask("TaskB"); // 输出: Initializing TaskB
initializeTask("TaskB"); // 无输出
五、使用WeakSet对象
WeakSet是另一个ES6引入的数据结构，它类似于Set，但它的值必须是对象，并且这些对象是弱引用的，不会影响垃圾回收。
1. 基本实现
WeakSet允许你存储对象，并且这些对象是弱引用的，这意味着它们不会阻止垃圾回收。
const executedWeakSet = new WeakSet();
function executeOnce(obj) {
if (!executedWeakSet.has(obj)) {
console.log("This will only log once for object:", obj);
executedWeakSet.add(obj);
}
}
const obj = {};
executeOnce(obj); // 输出: This will only log once for object: [object Object]
executeOnce(obj); // 无输出
2. 应用场景
WeakSet在处理DOM元素或者其他对象时非常有用，特别是在需要确保某些操作只执行一次的情况下。
const initializedElements = new WeakSet();
function initializeElement(element) {
if (!initializedElements.has(element)) {
console.log("Initializing element:", element);
initializedElements.add(element);
}
}
const div = document.createElement("div");
initializeElement(div); // 输出: Initializing element: [object HTMLDivElement]
initializeElement(div); // 无输出
六、使用Promise
Promise是ES6引入的异步编程解决方案，它不仅可以用于处理异步操作，还可以确保某些代码只执行一次。
1. 基本实现
你可以创建一个Promise来确保某些代码只执行一次。
let promise = new Promise((resolve, reject) => {
console.log("This will only log once");
resolve();
});
promise.then(() => {
console.log("Promise resolved");
});
2. 应用场景
Promise在处理异步操作时非常有用，比如在加载资源、初始化数据等场景中。
let isInitialized = false;
let initPromise;
function initializeApp() {
if (!isInitialized) {
initPromise = new Promise((resolve, reject) => {
console.log("Initializing app...");
setTimeout(() => {
isInitialized = true;
resolve("App initialized");
}, 2000);
});
}
return initPromise;
}
initializeApp().then((message) => {
console.log(message); // 输出: App initialized
});
initializeApp().then((message) => {
console.log(message); // 立即输出: App initialized
});
七、使用Symbol
Symbol是ES6引入的一种新的基本数据类型，它可以用于创建唯一标识符，确保某些代码只执行一次。
1. 基本实现
你可以使用Symbol来创建一个唯一标识符，并用它来追踪代码是否已经执行。
const executeOnceSymbol = Symbol("executeOnce");
function executeOnce() {
if (!window[executeOnceSymbol]) {
console.log("This will only log once");
window[executeOnceSymbol] = true;
}
}
executeOnce(); // 输出: This will only log once
executeOnce(); // 无输出
2. 应用场景
Symbol在需要创建唯一标识符的场景中非常有用，特别是在大型应用中。
const initSymbol = Symbol("init");
function initializeApp() {
if (!window[initSymbol]) {
console.log("Initializing app...");
window[initSymbol] = true;
}
}
initializeApp(); // 输出: Initializing app...
initializeApp(); // 无输出
八、使用LocalStorage
LocalStorage允许你在客户端持久化存储数据，你可以利用它来确保某些代码只在特定的浏览器会话中执行一次。
1. 基本实现
LocalStorage提供了一个简单的API来存储和读取数据。
if (!localStorage.getItem("hasExecuted")) {
console.log("This will only log once");
localStorage.setItem("hasExecuted", "true");
}
2. 应用场景
LocalStorage在需要跨页面或者跨会话保持状态时非常有用，比如在用户登录、设置偏好等场景中。
function initializeApp() {
if (!localStorage.getItem("appInitialized")) {
console.log("Initializing app...");
localStorage.setItem("appInitialized", "true");
}
}
initializeApp(); // 输出: Initializing app...
initializeApp(); // 无输出
九、使用SessionStorage
SessionStorage类似于LocalStorage，但它的数据只在一个会话中有效，当会话结束（比如浏览器窗口关闭）时，数据会被清除。
1. 基本实现
SessionStorage提供了一个简单的API来存储和读取数据。
if (!sessionStorage.getItem("hasExecuted")) {
console.log("This will only log once");
sessionStorage.setItem("hasExecuted", "true");
}
2. 应用场景
SessionStorage在需要在一个会话中保持状态时非常有用，比如在表单填充、临时数据存储等场景中。
function initializeApp() {
if (!sessionStorage.getItem("appInitialized")) {
console.log("Initializing app...");
sessionStorage.setItem("appInitialized", "true");
}
}
initializeApp(); // 输出: Initializing app...
initializeApp(); // 无输出
十、使用第三方库
有许多第三方库可以帮助你实现代码只执行一次的功能，比如Lodash的_.once函数。使用第三方库可以简化你的代码并提高可读性。
1. 基本实现
Lodash是一个流行的JavaScript实用工具库，它提供了许多有用的函数，包括_.once。
const _ = require('lodash');
const initializeApp = _.once(function() {
console.log("Initializing app...");
});
initializeApp(); // 输出: Initializing app...
initializeApp(); // 无输出
2. 应用场景
使用第三方库在需要简化代码和提高可读性时非常有用，特别是在大型项目中。
const _ = require('lodash');
const initializeApp = _.once(function() {
console.log("App initialized");
});
initializeApp(); // 输出: App initialized
initializeApp(); // 无输出
十一、使用函数属性
在JavaScript中，函数也是对象，因此你可以在函数上设置属性来记录其执行状态。
1. 基本实现
你可以在函数上设置一个属性来记录它是否已经执行。
function executeOnce() {
if (!executeOnce.hasExecuted) {
console.log("This will only log once");
executeOnce.hasExecuted = true;
}
}
executeOnce(); // 输出: This will only log once
executeOnce(); // 无输出
2. 应用场景
函数属性在需要确保函数只执行一次时非常有用，特别是在需要简化代码时。
function initializeApp() {
if (!initializeApp.isInitialized) {
console.log("Initializing app...");
initializeApp.isInitialized = true;
}
}
initializeApp(); // 输出: Initializing app...
initializeApp(); // 无输出
十二、使用类和静态方法
在面向对象编程中，你可以使用类和静态方法来确保某些代码只执行一次。
1. 基本实现
你可以创建一个类，并使用静态方法和静态属性来记录代码是否已经执行。
class AppInitializer {
static hasExecuted = false;
static initialize() {
if (!AppInitializer.hasExecuted) {
console.log("Initializing app...");
AppInitializer.hasExecuted = true;
}
}
}
AppInitializer.initialize(); // 输出: Initializing app...
AppInitializer.initialize(); // 无输出
2. 应用场景
类和静态方法在需要组织代码和提高可读性时非常有用，特别是在大型项目中。
class App {
static isInitialized = false;
static initialize() {
if (!App.isInitialized) {
console.log("App initialized");
App.isInitialized = true;
}
}
}
App.initialize(); // 输出: App initialized
App.initialize(); // 无输出
十三、使用模块（ES6模块）
ES6模块系统允许你将代码分割成独立的模块，每个模块都有自己的作用域。这可以帮助你确保某些代码只执行一次。
1. 基本实现
你可以将需要只执行一次的代码放在一个模块中，然后导入这个模块。
// initialize.js
let isInitialized = false;
export function initialize() {
if (!isInitialized) {
console.log("Initializing app...");
isInitialized = true;
}
}
// main.js
import { initialize } from './initialize.js';
initialize(); // 输出: Initializing app...
initialize(); // 无输出
2. 应用场景
ES6模块在需要组织代码和提高可读性时非常有用，特别是在大型项目中。
// app.js
let isInitialized = false;
export function initialize() {
if (!isInitialized) {
console.log("App initialized");
isInitialized = true;
}
}
// main.js
import { initialize } from './app.js';
initialize(); // 输出: App initialized
initialize(); // 无输出
十四、使用项目管理系统
在团队协作和项目管理中，确保某些任务或代码只执行一次是非常重要的。你可以使用项目管理系统来帮助你实现这一目标。
1. PingCode
PingCode是一个功能强大的研发项目管理系统，它可以帮助你确保某些任务或代码只执行一次。你可以使用PingCode来追踪任务状态，并确保每个任务只执行一次。
import PingCode from 'pingcode';
const task = new PingCode.Task('Initialize App');
if (!task.isCompleted()) {
console.log("Initializing app...");
task.complete();
}
2. Worktile
Worktile是一个通用的项目协作软件，它可以帮助你组织和管理项目任务，确保每个任务只执行一次。
import Worktile from 'worktile';
const task = new Worktile.Task('Initialize App');
if (!task.isCompleted()) {
console.log("Initializing app...");
task.complete();
}
结论
确保JavaScript中的一行代码只执行一次是一个常见的编程需求，有多种方法可以实现这一目标。标志变量、IIFE、闭包、ES6的Set和WeakSet、Promise、Symbol、LocalStorage、SessionStorage、第三方库、函数属性、类和静态方法、ES6模块以及项目管理系统（如PingCode和Worktile），都是可行的解决方案。选择哪种方法取决于你的具体需求和应用场景。通过合理选择和应用这些方法，你可以确保代码的执行顺序和逻辑的正确性，提高代码的可维护性和可读性。
相关问答FAQs：
1. 为什么我想让JavaScript中的一行代码只执行一次？
在某些情况下，我们可能希望某个特定的JavaScript代码只在特定条件下执行一次，而不是每次页面加载时都执行。这样可以避免重复执行相同的代码，提高网页性能。
2. 如何让JavaScript中的一行代码只执行一次？
有几种方法可以实现这一目标。一种常用的方法是使用一个布尔变量来标记该代码是否已经执行过。在代码执行之前，我们可以检查该变量的值，如果为false，则执行代码并将变量设置为true，以防止代码再次执行。
例如：
let codeExecuted = false;
function executeCodeOnce() {
if (!codeExecuted) {
// 在这里放置你想要执行的代码
codeExecuted = true;
}
}
这样，代码只会在第一次调用executeCodeOnce函数时执行一次。
3. 还有其他方法可以让JavaScript中的一行代码只执行一次吗？
是的，除了使用布尔变量之外，还有其他方法可以实现代码只执行一次的效果。例如，可以使用立即执行函数（Immediately Invoked Function Expression，IIFE）来包装需要执行的代码，确保代码只在定义时执行一次。
(function() {
// 在这里放置你想要执行的代码
})();
这种方法将代码包裹在一个匿名函数中，并立即调用该函数，从而实现代码只执行一次的效果。在其他地方再次调用该函数也不会再次执行代码。
以上是几种让JavaScript中的一行代码只执行一次的方法，你可以根据具体的需求选择适合的方法来实现。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3718116
