javascript - 为什么在运行时 Js 会变得凌乱

Question

我正在做一个函数，使用具有 2 个属性的clases对象在元素的CSS类之间切换，活动和非活动以及全局变量计数以跟踪运行时间。我意识到一些奇怪的 JS 行为：HTML

这里一切正常，在控制台输出中我得到了切换效果

function toogleClases() {
    if(count%2==0){
        return clases.active;
    }
    else{
        return clases.non_active;
    }
}
for(let i = 0 ; i < 10 ; i++){
    console.log(toogleClases());
    count++;
}

但是如果我将其插入count++到togle函数本身中（我认为更实用）

function toogleClases() {
    if(count%2==0){
        return clases.active;
    }
    else{
        return clases.non_active;
    }
    count++;
}

for(let i = 0 ; i < 10 ; i++){
    console.log(toogleClases());
}

我在控制台上总是得到相同的值“10 次：活动”，我很想知道为什么会发生这种情况，我怀疑这是一个奇怪的 Js 部分

Answer 1

You don't need a counter you can pass i as parameter:

 function toogleClases(count) {
    if(count%2==0){
        return clases.active;
    }
    else{
        return clases.non_active;
    }

}

for(let i = 0 ; i < 10 ; i++){
    console.log(toogleClases(i));
}

Answer 2

您的函数在更新计数变量之前返回输出。return 语句后的任何内容都不会触发，因此您的count值始终为0. 您需要count++在返回输出之前更新。

var count = 0;
function toogleClases() {
   
    let status = false;
    if(count%2 == 0){
        status = true;
    } 
    
    count++;
    return status ? 'active' : 'non active';
    //replace 'active' with clases.active and 'non active' with  clases.non_active
   
}

for(let i = 0 ; i < 10 ; i++){
    console.log(toogleClases());
}

Answer 3

因为您在返回count++后调用，所以永远无法联系到。试试这个：toogleClases()count++

function toogleClases() {
    if(count%2==0){
        count++;
        return clases.active;
    }
    else{
        count++;
        return clases.non_active;
    }

}

for(let i = 0 ; i < 10 ; i++){
    console.log(toogleClases());
}