setInterval не работает в Chrome (работает только в первый раз)

Question

Вот мой код:

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); 

Этот код не работает в Chrome (он работает в первый раз). Что я могу сделать, чтобы исправить это?

Answer 1

$tot имеет локальный объем не может быть доступен за пределами блока.

DOM готов ($(document).ready(function(){) имеет анонимную функцию, чтобы ваш $tot переменная локальная область

Переместить весь код внутри 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?

Answer 2

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; 
} 

Изменить код как это. Она будет работать

Answer 3

Ваш Кодекс Работает в моем браузере (Chrome):

Но для вас ее нет, то вы должны попробовать с этим:

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; 
} 

Answer 4

Это не проблема с Chrome - это проблема с вашим кодом. Вот результат я получил:

Первая итерация

Cur = карапуз! VM325: 14

Cur = 0 $ карапуз = 9 VM325: 16

Следующая Допустимы: 1 VM325: 17

Второй Итерация:

Cur = карапуз ! VM325: 14

Cur = 1 $ карапуз = 9 VM325: 16

Следующая Допустимы: 2 VM325: 17

Thrid:

Cur = карапуз! VM325: 14

Cur = 2 $ карапуз = 9 VM325: 16

Следующая Допустимы: 3 VM325: 17

т.д.

Я получил это просто положить некоторую консоль.войти заявления в там, чтобы увидеть, что происходит:

$(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); 

редактирование: @ Tushar-Гупта дает Я. ответ =] Я просто указать вам направление (в случае, если вы просто нужен указатель)