Geek asks and answers

SetInterval using value to last?

I am developing a Google Chrome extension and I have a rather difficult problem. (I will try to make everything as simple as I can)

Basically, I allow the user to adjust the interval cycle speed setInterval. I do this with an input field that, when entering data, sets the value localStorageto keyUp. The value is localStoragethen passed to the script content via the Chrome messaging API, and the loop setIntervalautomatically selects it.

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

And the console returns these logs after entering a custom value (it returns "2000" for all logs when the default value is loaded, as it should):

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 ?

. , console.log(), "scanTime LS, response:". ?

+3
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"]);
}
0

More articles:


All Articles