为了让JavaScript代码永远只执行一次，可以使用多种方法，如使用全局变量、IIFE（立即调用的函数表达式）、标志位、事件监听器等。这里，我们详细描述一下使用全局变量的方法。
通过全局变量来控制代码的执行次数是最简单且直观的方法。首先，定义一个全局变量来存储代码是否已经执行的状态。在代码运行时，检查这个变量，如果它表明代码尚未执行，则执行代码并更新该变量。这样，后续的尝试将不会重新执行代码。
一、使用全局变量
1、定义全局变量
首先，我们需要定义一个全局变量来记录代码是否已经执行。这通常是在程序的最顶端进行的。全局变量的命名应该尽量清晰，以便维护和理解。
var hasExecuted = false;
2、检查并更新变量
在需要执行的代码部分，我们检查这个全局变量的值。如果 hasExecuted 为 false，则执行代码并将其更新为 true，否则跳过代码执行。
if (!hasExecuted) {
// 执行一次的代码
console.log("This code runs only once.");
hasExecuted = true;
}
3、实际应用场景
这种方法非常适合用于初始化操作，例如设置配置、加载资源等。下面是一个实际应用的例子：
var hasExecuted = false;
function initializeApp() {
if (!hasExecuted) {
// 初始化应用程序
console.log("App is initializing...");
// 模拟初始化操作
setTimeout(() => {
console.log("App initialized.");
}, 1000);
hasExecuted = true;
} else {
console.log("App has already been initialized.");
}
}
// 模拟多次调用
initializeApp();
initializeApp();
在这个例子中，即使多次调用 initializeApp 函数，实际的初始化操作只会执行一次。
二、使用IIFE（立即调用的函数表达式）
1、定义IIFE
IIFE是一种设计模式，允许您在定义函数后立即执行它。通过这种方式，可以创建一个私有的作用域来存储状态。
(function() {
var hasExecuted = false;
window.runOnce = function() {
if (!hasExecuted) {
// 仅执行一次的代码
console.log("This code runs only once.");
hasExecuted = true;
}
};
})();
2、调用函数
使用这种方法，可以通过全局函数 runOnce 来控制代码的执行次数。
runOnce();
runOnce();
3、实际应用场景
这种方法非常适合用来保护私有变量，并确保代码的可维护性和可读性。
(function() {
var hasExecuted = false;
window.initializeApp = function() {
if (!hasExecuted) {
// 初始化应用程序
console.log("App is initializing...");
// 模拟初始化操作
setTimeout(() => {
console.log("App initialized.");
}, 1000);
hasExecuted = true;
} else {
console.log("App has already been initialized.");
}
};
})();
// 模拟多次调用
initializeApp();
initializeApp();
在这个例子中，即使多次调用 initializeApp 函数，实际的初始化操作也只会执行一次。
三、使用标志位
1、定义标志位
标志位是一种简单的方式来控制代码的执行次数。通常，它是一个布尔变量，用来记录代码是否已经执行。
let executed = false;
2、检查并更新标志位
在代码中检查这个标志位，并根据它的值来决定是否执行代码。
if (!executed) {
// 执行一次的代码
console.log("This code runs only once.");
executed = true;
}
3、实际应用场景
标志位的方法适用于需要多次检查的场景，例如在事件处理函数中。
let executed = false;
document.getElementById("myButton").addEventListener("click", () => {
if (!executed) {
// 执行一次的代码
console.log("Button clicked for the first time.");
executed = true;
} else {
console.log("Button has already been clicked.");
}
});
在这个例子中，按钮的点击事件处理函数只会在第一次点击时执行特定代码。
四、使用事件监听器
1、定义事件监听器
事件监听器是一种常见的方式来控制代码的执行次数。通过在事件触发后移除监听器，可以确保代码仅执行一次。
function handleClick() {
// 执行一次的代码
console.log("Button clicked for the first time.");
document.getElementById("myButton").removeEventListener("click", handleClick);
}
document.getElementById("myButton").addEventListener("click", handleClick);
2、实际应用场景
这种方法适合处理用户交互事件，例如按钮点击、鼠标移动等。
五、使用WeakMap或WeakSet
1、定义WeakMap或WeakSet
WeakMap和WeakSet可以用来存储对象的弱引用，从而防止内存泄漏。这在需要对多个对象进行标记时非常有用。
const executedMap = new WeakMap();
function executeOnce(obj) {
if (!executedMap.has(obj)) {
// 执行一次的代码
console.log("This code runs only once for this object.");
executedMap.set(obj, true);
}
}
2、实际应用场景
这种方法适用于需要对多个对象进行标记的场景，例如在复杂的应用程序中。
const executedMap = new WeakMap();
function executeOnce(obj) {
if (!executedMap.has(obj)) {
// 执行一次的代码
console.log("This code runs only once for this object.");
executedMap.set(obj, true);
}
}
const obj1 = {};
const obj2 = {};
executeOnce(obj1);
executeOnce(obj1);
executeOnce(obj2);
在这个例子中，executeOnce 函数只会对每个对象执行一次特定代码。
六、总结
通过上述方法，可以有效地控制JavaScript代码的执行次数。无论是使用全局变量、IIFE、标志位、事件监听器还是WeakMap/WeakSet，每种方法都有其适用的场景和优缺点。在实际应用中，选择最合适的方法可以提高代码的可维护性和可读性。
使用全局变量是最简单直接的方法，但在复杂的应用中可能导致全局变量污染。IIFE可以创建私有作用域，保护变量不被外部访问。标志位方法适用于需要多次检查的场景，而事件监听器则适合处理用户交互事件。WeakMap和WeakSet则适用于需要对多个对象进行标记的复杂应用。
希望通过本文的详细介绍，您能找到最适合自己项目的方法，让JavaScript代码只执行一次。
相关问答FAQs：
1. 为什么我的JS代码会重复执行多次？
- 当你的JS代码被放置在循环语句或事件处理程序中时，可能会导致代码多次执行的问题。
2. 如何让JS代码只执行一次？
- 可以使用一个标志变量来判断代码是否已经执行过，如果执行过，则不再执行。
- 另一种方法是使用立即执行函数表达式（IIFE），将代码包装在一个函数内部，并立即调用该函数，确保代码只执行一次。
3. 我的JS代码为什么在页面刷新时会重新执行？
- 页面刷新会导致整个页面重新加载，包括JS代码。如果你希望代码只在页面首次加载时执行一次，可以使用浏览器的本地存储（如localStorage）来保存一个标志，表示代码已经执行过。在代码执行前，先检查该标志是否存在，如果存在则不执行代码。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3705241
