Question

我正在尝试更改图像的src属性，然后使用setInterval()方法恢复默认值但似乎如果我在函数内部使用变量则无法正常工作必须在函数之外，为什么变量值不会在函数内部发生变化？

var Img1 = document.getElementById('img1');

setInterval(function(){
    var boolean= true;
    if(boolean){
        Img1.src = "pic1.jpg";
        }else{
        Img1.src = "default.jpg";
    }
    boolean= !boolean;
} , 3000);



// This one work properly!

var Img1 = document.getElementById('img1');
var boolean= true;

setInterval(function(){

    if(boolean){
        Img1.src = "pic1.jpg";
        }else{
        Img1.src = "default.jpg";
    }
    boolean= !boolean;
} , 3000);

Answer 1

这是因为每当函数被调用时，boolean总是为true。这是函数的第一件事，将boolean设置为true：

var boolean= true;

在检查要查看哪个src之前，boolean不会在函数内部进行修改。因此，您的条件总是达到相同的结果，即将Img.src设置为pic1.jpg。希望有所帮助！

Answer 2

在发送到setInterval（）的函数中，您正在设置＆＃34; boolean＆＃34;在函数的每次迭代开始时都为真。因此，以下代码将始终设置Img1.src =＆＃34; pic1.jpg＆＃34 ;;和行Img1.src =＆＃34; default.jpg＆＃34 ;;永远不会被运行因为＆＃34; boolean＆＃34;在每次迭代的情况下都是如此。

ID     Conversation
1223    "blah, blah, blah, blah, ... blaaaah blah.. more blaaah, last blah"
5000    "new id, with more blah and the blah continues"

您希望将setInterval包装在一个函数中，以便您可以修改每次迭代的布尔值，并将值setDefault限定为调用者。例如：

setInterval(function(){
    var boolean= true;
    if(boolean){
        Img1.src = "pic1.jpg";
    }else{
        Img1.src = "default.jpg";
    }
    boolean= !boolean;
} , 3000);

然后您应该能够使用

调用此函数

const IMAGE_DEFAULT = "default.jpg";
const IMAGE_PIC1 = "pic1.jpg";

function StartImageInterval(img) {
    var setDefault = true;

    setInterval(function() {
        img.src = ((setDefault) ? IMAGE_DEFAULT : IMAGE_PIC1);
        setDefault = !setDefault;
    }, 3000);
}

改变函数内部的变量

2 个答案: