setInterval在Chrome中不起作用(仅限第一次工作)

时间:2014-02-16 06:59:18

标签: javascript jquery google-chrome

这是我的代码:

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中不起作用(它第一次运行)。我该怎么做才能解决它?

4 个答案:

答案 0 :(得分:1)

$tot无法在块外访问本地范围。

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

阅读What is the scope of variables in JavaScript?

答案 1 :(得分:0)

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

像这样更改您的代码。它会起作用

答案 2 :(得分:0)

您的代码在我的浏览器(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;
}

答案 3 :(得分:0)

这不是Chrome的问题 - 这是您的代码的问题。这是我得到的输出:

首次迭代

  

Cur!= tot! VM325:14

     

Cur = 0 $ tot = 9 VM325:16

     

下一个val是:1 VM325:17

第二次迭代:

  

Cur!= tot! VM325:14

     

Cur = 1 $ tot = 9 VM325:16

     

下一个val是:2 VM325:17

<强> THRID:

  

Cur!= tot! VM325:14

     

Cur = 2 $ tot = 9 VM325:16

     

下一个val是:3 VM325:17

我通过简单地在其中放入一些console.log语句来了解发生了什么:

$(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-gupta给你答案=]我只是指出你的方向(如果你只是需要一个指针)