setInterval 使用前一个值？答案

【问题标题】：setInterval using the value before last?setInterval 使用前一个值？
【发布时间】：2012-04-26 06:21:39
【问题描述】：

我正在开发 Google Chrome 扩展程序，但遇到了一个相当奇怪的问题。（我会尽量保持简单）

基本上，我允许用户自定义setInterval 循环的间隔速度。我使用输入框来执行此操作，当输入数据时，该输入框在keyUp 上设置localStorage 值。然后，localStorage 值通过 Chrome 的消息传递 API 传递给内容脚本，setInterval 循环自动获取它。

options.html

<!DOCTYPE html>
    <head>
    </head>

    <body>
        <input type="text" id="customTime_Input" onKeyUp="setPref_customTime()" />

        <!--Call JavaScript functions after all elements are created-->
        <script type="text/javascript" src="messagePassing.js"></script>
        <script type="text/javascript" src="options.js"></script>
    </body>
</html>

background.html

<!DOCTYPE html>
    <head>
        <script type="text/javascript" src="messagePassing.js"></script>
        <script type="text/javascript" src="content.js"></script>
    </head>

    <body>
    </body>
</html>

messagePassing.js

if(localStorage["scanTime"] == undefined || localStorage["scanTime"] == ""){
   localStorage["scanTime"] = 2000;
}

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        if (request.method == "getScanTime"){
            sendResponse({data: localStorage["scanTime"]});
            console.log("scanTime LS, response: " + localStorage["scanTime"]);
        }
    }
);

options.js

function setPref_customTime(){
   var inputBoxElement = document.getElementById("customTime_Input");

   localStorage["scanTime"] = inputBoxElement.value;
   console.log("scanTime LS, setPref_customTime(): " + localStorage["scanTime"]);
}

content.js

window.load = passMessages();
function passMessages(){
    chrome.extension.sendRequest({method: "getScanTime"}, function(response) {
        localStorage["scanTime"] = response.data;
        console.log("scanTime LS, request: " + localStorage["scanTime"]);
    });

    scanPage();
}

function scanPage(){
    console.log("scanTime LS, scanPage: " + localStorage["scanTime"]);

    setInterval(function match(){
        console.log("scanTime LS, match: " + localStorage["scanTime"]);
    }, localStorage["scanTime"]);
}

输入自定义值后，控制台会返回这些日志（加载默认值时，它会为所有日志返回“2000”，就像它应该的那样）：

scanTime LS, scanPage: 2000
scanTime LS, scanPage: 2000
scanTime LS, request: 5000
scanTime LS, request: 5000
scanTime LS, scanPage: 2000
scanTime LS, request: 5000
scanTime LS, match: 5000
scanTime LS, match: 5000
scanTime LS, match: 5000
scanTime LS, match: 5000
[etc]

它清楚地表明setInterval 正在使用新值，但页面和日志以旧值的速度刷新（这不是用户错误。我多次使用了截然不同的值并且具有相同的值结果）。同名的localStorage 怎么可能相差几行就有不同的值？

更新：我刚刚注意到控制台报告了除“scanTime LS, response:”之外的所有console.log() 命令。这很重要吗？

【问题讨论】：

标签： google-chrome-extension message local-storage setinterval

【解决方案1】：

您看到的问题是您有一个以 2000 毫秒运行的循环，然后以 5000 毫秒开始一个新的循环，让您同时运行两个循环。当您使用clearInterval 启动第二个时，您需要取消第一个。

这样的事情应该可以工作。

function scanPage(){
    console.log("scanTime LS, scanPage: " + localStorage["scanTime"]);

    if (localStorage["intervalID"]) {
      clearInterval(localStorage["intervalID"]);
    }

    localStorage["intervalID"] = setInterval(function match(){
        console.log("scanTime LS, match: " + localStorage["scanTime"]);
    }, localStorage["scanTime"]);
}

【讨论】：

是的，我认为报告多个日志很奇怪。我现在试试，然后回复你。 :)
不。插入您的代码，它仍然具有完全相同的效果。 ://
您可能需要将 intervalID 转换回 int。
我不明白.. 你能解释清楚一点或编辑你的代码吗？
setInterval 返回一个整数5，localStorage["intervalID"] 返回一个字符串"5"。 clearInterval 可能只适用于整数。 clearInterval(parseInt(localStorage["intervalID"]));