Question

我在某个函数方面遇到了一些问题。我正在创建一个应用程序，当手机电量不足时，它会自动切换到暗模式。问题是，当我切换 html 页面时，“deviceready”功能会不断触发，因此我在加载的每个页面上都会收到低电量警报。是因为我将事件侦听器设为全局吗？如果是这样......我应该把它放在哪里，让它只运行一次？非常感谢。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

    window.addEventListener("batterystatus", onBatteryStatus, false);
}

function onBatteryStatus(status) {
    console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);

    if(status.level < 15){
        alert("Low Battery");
    }
}

Answer 1

是的...每次打开新 URL 时都会启动 deviceready。在 JS 中，每次打开新 URL 时，所有 JS 代码都会加载到浏览器中，然后从初始状态开始运行。如果您希望记录页面之间的某些内容，您可以使用浏览器 cookie 和/或本地存储。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.addEventListener("batterystatus", onBatteryStatus, false);
}

function onBatteryStatus(status) {
    console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);

    if(status.level < 15){
        if (!window.localStorage.getItem('alerted')) alert("Low Battery");
        window.localStorage.setItem('alerted', true);
    }
    else {
        window.localStorage.removeItem('alerted');
    }
}

onBatteryStatus({level: 1, isPlugged: false})

Answer 2

您可以使用 LocalStorage setItem 函数保存一个对象，该对象包含一个指示已显示警报的属性：

比如说，例如{alertShown: true} 在显示警报之前，您可以在事件侦听器中调用 LocalStorage getItem 函数。如果函数返回 null（意味着没有带有 KEY alertShown 的对象），然后您可以显示警报。否则，如果有一个带有 KEY 的对象，（意味着已经显示了警报）什么也不做或做别的事情。

注意：确保在某个时间点remove从存储中获取数据，例如，如果用户的电池电量不再低。因此，当设备再次变低时，该功能可以正常运行。

这是有关如何使用 LocalStorage

的有用链接

函数在每个新的 HTML 页面上不断执行

2 个答案: