Question

这是我的代码：

var srcArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg","_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var myImg = document.getElementById("mainImage");
var imgIndex = 0;
var status = false;

myImg.onclick = function () {
    if (status) {
        var collage = setInterval(changeSrc,1500);
        status = true;
    } else {
        clearInterval(collage);
        status = false;
    }
}

function changeSrc (){
    myImg.setAttribute("src",srcArray[imgIndex]);
    imgIndex++;
    if (imgIndex == srcArray.length) {
        imgIndex = 0;
    }
}

我尝试做的是在未设置间隔时设置changeSrc的间隔，设置间隔时设置清除间隔。我在Firebug中看到浏览器执行if的第一部分，然后执行else的第二行（状态= false）。

当我点击图像时设置间隔后，它会在同一图像上开始另一个间隔。它基本上只是每次点击都运行得更快，并且不会停止。

问题出在哪里？

提前感谢您的帮助：）

Answer 1

这样做：

myImg.onclick = function () {
    if (status) {
        var collage = setInterval(changeSrc,1500);
    } else {
        clearInterval(collage);
    }
    status = !status;
}

在您的代码中，您正在初始化状态

Answer 2

只需将collage var移出if语句，因为当你将它声明为if语句时，这个变量只存在于这个范围内。

而且我不知道为什么它不和bool合作，这就是为什么我把它改成数字：P我希望其他人可以回答这个问题。

var myImg = document.getElementById("mainImage");
var imgIndex = 0;
var status = 1;
var collage;

myImg.onclick = function () 
{
    if(status == 1)
    {
        collage = setInterval(changeSrc,1500); 
        status = 0;
    }
    else
    {
        clearInterval(collage);
        status = 1;
    }
}

Answer 3

更改function changeSrc()中的状态，而不是if else中的状态。

Answer 4

您的代码效果很好。你必须改变：

if (status)

通过

if (status == true)

也

if (status === true)

说明：如果您编写if(status === true)，则仅当status为true时结果才为true。但是，如果您撰写if(status)，则对于与false，null，empty string，undefined value或{{1}不同的任何状态，结果均为true }}

希望它有用！

Answer 5

当您单击图像时，它会启动图像翻转，即时为第一个，而不是按计时器单击它停止。我认为这是理想的效果。你不需要这个状态。

var srcArray =     ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg","_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"],
    myImg = document.getElementById("mainImage"),
    imgIndex = 0,
    tmr;

myImg.onclick = function () {

    // if tmr === undefined, start the rollover.
    if (!tmr) {

       // I call changeSrc() to give instant feedback on first click!
       changeSrc();


       tmr = setInterval(changeSrc,1500);

    // else if tmr has a value stop the rollover, make sure we set tmr to undefined.
    }else{

       clearInterval(tmr);
       tmr=undefined; !IMPORTANT
    } 
}

function changeSrc (){
   myImg.setAttribute("src",srcArray[imgIndex]);
   imgIndex++;
   if (imgIndex == srcArray.length) {
       imgIndex = 0;
}

}

http://jsfiddle.net/uq8mfLun/2/

Javascript同时执行if和else

5 个答案: