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 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?

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

setInterval在Chrome中不起作用（仅限第一次工作）

4 个答案: