Search code examples
javascripttimegoogle-chrome-extensiongoogle-chrome-app

making clock in chrome app - setTimeout() returns error


I am making chrome app and wanted to have simple clock in fullscreen mode of application (so i cant see windows clock). I thought i'd trivial since javascript has all the functions to print out current date on the screen. I also made that in pure javascript (i mean in www apps not packaged apps). The problem occured when I wanted to call setTimeout() function - chrome doesnt let me do this and warns me with words:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

My code looks like this:

function display () {
    this.currentTimeTxt = "TIME: ";
    this.getCurrentTime = function () {
        var time = new Date()
        if ( time.getHours() < 10 ) { var hours = '0' + time.getHours() } else { var hours = time.getHours() }
        if ( time.getMinutes() < 10 ) { var minutes = '0' + time.getMinutes() } else { var minutes = time.getMinutes() }
        if ( time.getSeconds() < 10 ) { var seconds = '0' + time.getSeconds() } else { var seconds = time.getSeconds() }
        return hours + ':' + minutes + ':' + seconds;
    }
}
var display = new display();
setTimeout(console.log(display.getCurrentTime), 1000);

What is the proper way to make clock "ticking" every second in chrome packaged apps?

---- EDITED CODE:

function display () {
    this.currentTimeTxt = "TIME: ";
    this.getCurrentTime = function () {
        var time = new Date()
        if ( time.getHours() < 10 ) { var hours = '0' + time.getHours() } else { var hours = time.getHours() }
        if ( time.getMinutes() < 10 ) { var minutes = '0' + time.getMinutes() } else { var minutes = time.getMinutes() }
        if ( time.getSeconds() < 10 ) { var seconds = '0' + time.getSeconds() } else { var seconds = time.getSeconds() }
        setTimeout(function () { display.getCurrentTime}, 1000)
        return hours + ':' + minutes + ':' + seconds;
        }
    }
var display = new display();
display.getCurrentTime()

Solution

  • First, you want setInterval, not setTimeout. setTimeout only executes once after the specified delay, while setInterval executes once every interval.

    setInterval and setTimeout both take either a string (which is eval'd, generally a bad practice) or a function. The return value of console.log is not either of these. And console.log needs the return value of display.getCurrentTime, not the function itself, so remember to include the parentheses.

    So you just need to pass in a function that gets the current time, and logs it.

    It's common to pass setInterval (or setTimeout) an anonymous function, like so:

    setInterval(function(){
        console.log(display.getCurrentTime());
    }, 1000);