setInterval does not work in Chrome (work first time only)

Question

Here is my code:

var $cur = 0;
$(document).ready(function (e) {
    $tot = document.getElementsByTagName("img").length;
    changetile();
});

function changetile() {
    if ($cur == $tot) {
        $next = 1;
    } else {
        $next = $cur + 1;
    }
    $("#tile-" + $cur).fadeOut(1000);
    $("#tile-" + $next).fadeIn(1000);
    $cur = $next;
}
var myVar = setInterval(function () {
    changetile()
}, 4500);

This code does not work in Chrome (it works the first time). What can I do to fix it?

And then save some space with `var myVar = setInterval(changetile,4000)` — mplungjan, Feb 16 '14 at 07:08

score 1 · Answer 1 · edited May 23 '17 at 12:21

$tot has local scope can not be accessible outside the block.

DOM ready($(document).ready(function(){) has a anonymous function so your$tot variable has local scope

Move all your code inside DOM Ready

var $cur = 0;
$(document).ready(function (e) {
    $tot = document.getElementsByTagName("img").length;
    function changetile() {
        if ($cur == $tot) {
            $next = 1;
        } else {
            $next = $cur + 1;
        }
        $("#tile-" + $cur).fadeOut(1000);
        $("#tile-" + $next).fadeIn(1000);
        $cur = $next;
    }
    var myVar = setInterval(function () {
        changetile()
    }, 4500);
    changetile();
});

Read What is the scope of variables in JavaScript?

I have a doubt about `$tot` as a *local* var, could you check `function f(){v=1;};f();v;`? Chrome says `1`. — , Feb 16 '14 at 07:35

score 0 · Answer 2 · answered Feb 16 '14 at 07:11

var $cur = 0;
$(document).ready(function (e) {

    var myVar = setInterval(function () {
       $tot = document.getElementsByTagName("img").length;
       changetile()
}, 4500);
});

function changetile() {
    if ($cur == $tot) {
        $next = 1;
    } else {
        $next = $cur + 1;
    }
    $("#tile-" + $cur).fadeOut(1000);
    $("#tile-" + $next).fadeIn(1000);
    $cur = $next;
}

Change your code like this. It will work

score 0 · Answer 3 · answered Feb 16 '14 at 07:11

Your Code is Works in my Browser( Chrome ) :

But for you its not , then you should try With this :

var $cur = 0,$tot;
$(document).ready(function (e) {
$tot = document.getElementsByTagName("img").length;
var myVar = setInterval(changetile,4500);
});
function changetile() {
if ($cur == $tot) {
    $next = 1;
} else {
    $next = $cur + 1;
}
$("#tile-" + $cur).fadeOut(1000);
$("#tile-" + $next).fadeIn(1000);
$cur = $next;
}

score 0 · Answer 4 · answered Feb 16 '14 at 07:14

It isn't an issue with Chrome - it's an issue with your code. Here is the output I got:

First Iteration

Cur != tot! VM325:14

Cur = 0 $tot = 9 VM325:16

Next val is : 1 VM325:17

Second Iteration:

Cur != tot! VM325:14

Cur = 1 $tot = 9 VM325:16

Next val is : 2 VM325:17

Thrid:

Cur != tot! VM325:14

Cur = 2 $tot = 9 VM325:16

Next val is : 3 VM325:17

etc.

I got this by simply putting some console.log statements in there to see what's going on:

$(document).ready(function (e) {
    $tot = document.getElementsByTagName("img").length;
    changetile();
});

function changetile() {
    if ($cur == $tot) {
        $next = 1;
    console.log(" Cur == tot! ");
    } else {
        $next = $cur + 1;
    console.log(" Cur != tot! ");
    }
    console.log( "Cur = " + $cur + " $tot = " + $tot );
    console.log( " Next val is : " + $next )

    $cur = $next;
}
var myVar = setInterval(changetile, 4500);

Edit: @tushar-gupta gives ya the answer =] I just point you in the direction ( in case you just needed a pointer )

setInterval does not work in Chrome (work first time only)

4 Answers4