Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Rich P
Rich P
2,356 Points

Functions(?) undefined in updated browsers

Hi, I'm working on a project that updates contents on the web page using timers. This has been breaking on Chrome updates (it works on a Samsung Galaxy 5 but not Galaxy 6, iPhone 5 but not iPhone 6).

So I have two delay timers (I'm sure there's cleaner ways but I'm new and this is what has worked for me on this project) and when these delay timers trigger something changes (for the sake of this example it's console.log). But some recent update has broken these delay timers from triggering. I tried console.log prepareDelay1 and delay variables but it comes up undefined (and not the numbers it's supposed to be) I think it might have to do with scope or where I'm calling it.

Another note: I put the console.log(prepareDelay1) in the timerProgram and this logs the time (for example prepareDelay1 logs 6) but this doesn't trigger the function prepareDelay1.

Here is the simplified code:

var cycle = 0;
//This bit of code works fine, it's my timer
function getTimeRemaining(endtime){
    var time = timer;
    var seconds = Math.floor( (timer/1000) % 60 );
    var minutes = Math.floor( (timer / 1000 / 60 ) % 60 );
    return {
        'total': timer,
        'minutes': minutes,
        'seconds': seconds
    };


//Where Problem starts...       

function timerProgram(){
    if ( cycle !== 0 && timer >=0){
        console.log ('Working');
        var time = timer;
        var time = getTimeRemaining(timer); 
        $('#timer').text(time.minutes + ":" + time.seconds );
        timer -= 1000;
    }else{
        console.log('Something has broken'); //this runs after the timer goes past 0 after the initial timer (5 seconds) is finished
    }
};

//There is a link that when pressed updates the cycle to cycle 1

if( cycle == 1 ){
    cycle = 1;
    updateUser("cycle",cycle); //This is local storage which saves the state as the program updates
    var clock = setInterval(timerProgram, 999);
    var delayTime = setTimeout(delay,9000);
    var prepareDelay = setTimeout(prepareDelay1,6000);
    timer = 5000; //This works
    console.log(prepareDelay1);
    console.log(delay);

    function prepareDelay1(){
        console.log('Hi');
        timer = 1999; //This doesn't happen instead I get the console message 'Something has broken'
    };
        function delay(){
            if (cycle === 1){
                clock = clearInterval(clock);
                cycle = 2;
                updateUser("cycle",cycle);
                timer = 0;
                timer = 12000; //Does not run becauuse prepareDelay1 never triggers either
                clock = setInterval(timerProgram, 999);
                console.log("Hi, now changed to cycle 2");
                cycle = 3;
                updateUser("cycle",cycle);
            }else{
                console.log('Something is wrong');
            }
        };