Question

我正在开发Google Chrome扩展程序，而且我有一个奇怪的问题。（我会尽量保持这个尽可能简单）

基本上，我允许用户自定义setInterval循环的间隔速度。我使用输入框执行此操作，输入数据时，在localStorage上设置keyUp值。然后，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()命令。这有意义吗？

Answer 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"]);
}

setInterval使用前一个值？

1 个答案: