Question

我想知道是否只有在第一次加载特定页面时才能运行window.addEventListener('load' ...)。

我尝试仅将名为loaded的标志设置为false，并且如果eventListener仅在loaded === false内部运行代码。然后，一旦运行，我将其设置为true。但是不起作用，仍然每次都运行。

一旦事件监听器运行，我是否可以删除它？

Answer 1

保留localStorage项，该项包含一个与到目前为止已加载的所有页面相对应的数组。仅当该页面尚未存储在localStorage中时，才附加侦听器。例如：

const { href } = window.location;
const alreadyLoaded = JSON.parse(localStorage.loaded || '[]');
if (!alreadyLoaded.includes(href)) {
  alreadyLoaded.push(href);
  localStorage.loaded = JSON.stringify(alreadyLoaded);
  window.addEventListener('load', () => {
    // rest of your code
  });
}

Answer 2

否，每次页面加载时都不可能创建新的执行上下文。您可以尝试使用诸如localStorage之类的方法来保存状态。

LocalStorage API可帮助您保存以后可以访问的数据。它是一个对象，可用于访问当前来源的本地存储空间。

有关更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 3

简便方法：可以使用网络存储（如果受支持）。像这样：

if (!localStorage.getItem("listenerLoaded")) {
  window.addEventListener('load'...)
  localStorage.setItem("listenerLoaded", true);
}

将使用一些繁琐的工作：
2. Cookie（仍然需要浏览器支持）。
3. ajax并保持会话

Answer 4

加载侦听器后，只需在本地存储中设置一个值，然后读取该值，然后再次添加即可。

if (!localStorage.getItem("isLoaded")) {
  window.addEventListener('load' ...)
  localStorage.setItem("isLoaded", true);
}

Answer 5

使用removeEventListener是一个不错的选择：

var callback = function(){
   ...
}
window.removeEventListener('load',callback);
window.addEventListener('load',callback);

仅运行一次window.addEventListener（'load'...）

5 个答案: