3

私は 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]

It clearly shows that setInterval is using the new value, yet the page and log refreshes at the speed of the old value (and it's no user-error. I've used vastly different values multiple times and had the same results). How can a localStorage with the same name have different values a few lines apart?

Update: I've just noticed that the console reports all console.log() commands except for "scanTime LS, response: ". Is this significant?

4

1 に答える 1

0

あなたが見ている問題は、2000 ミリ秒で実行されている 1 つのループがあり、5000 ミリ秒で新しいループを開始するだけで、一度に 2 つのループが実行されることです。clearIntervalを使用して 2 番目のものを開始するときに、最初のものをキャンセルする必要があります。

このようなものがうまくいくはずです。

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"]);
}
于 2012-04-13T21:48:15.733 に答える