использовать javascript, чтобы заставить элемент по очереди появляться

Question

Итак, у меня есть два элемента: first и second; Я пытаюсь позволить им по очереди появляться; У меня есть код;

setTimeout(setInterval(function(){ 
    $(".first").hide(); 
    $(".second").show(); 
    },20000),10000) 

    setTimeout(setInterval(function(){ 
    $(".first").show(); 
    $(".second").hide(); 
    },20000),0) 

похоже, что эти коды не работают, может кто-нибудь сказать мне, что случилось?

Answer 1

я нашел альтернативу:

var d=0; 
    setInterval(function(){ 
    if(d==0){ 
     d=1 
     $(".first").hide(); 
     $(".second").show(); 
    }else if(d==1){ 
     d=0 
     $(".first").show(); 
     $(".second").hide(); 
    } 
    },10000) 

Answer 2

Ваши обратные вызовы setTimeout() должны быть действительными ссылками функций, такими как function() {setInterval(...)}. То, как вы имели его, вы сразу же выполнения setInterval(), а затем передавая результаты setTimeout() который ничего не делал:

setTimeout(function() { 
    setInterval(function(){ 
    $(".first").hide(); 
    $(".second").show(); 
},20000),10000); 

---

Но есть гораздо лучший способ осуществить это только с одним таймером :

(function() { 
    var flag = true; 
    setInterval(function() { 
     flag = !flag; 
     $(".first")[flag ? "hide" : "show"](); 
     $(".second")[flag ? "show" : "hide"](); 
    }, 10000); 
})(); 

Или, если вы установите скрыть/показать состояние противоположное изначально, то вы можете просто использовать JQuery-х .toggle() чтобы изменить видимость:

$(".first").show(); 
    $(".second").hide(); 
    setInterval(function() { 
     $(".first").toggle(); 
     $(".second").toggle(); 
    }, 10000);