コンテンツを代替するためにjavaScript setIntervalを使用しようとしても動作しません

Question

私はいくつかの要素のテキストを交互にして、MDNに示すようにパラメータを渡そうとしています。ただし、動作しません。私はjQueryと純粋なJavaScriptを混乱させているという問題はありますか？これは私のHTMLです。これは私のCSSです。これはJavaScriptです。

$(function() { 
    $("#top_navbar").on("show.bs.collapse", function() { 
     $("#top_navbar > ul").css({ 
      "background-color": "black", 
      "text-align": "center" 
     }); 
    }); 

    $("#top_navbar").on("hidden.bs.collapse", function() { 
     $("#top_navbar > ul").css("background-color", "transparent"); 
    }); 

    var headerStatus = 0; 
    var h1Header = $("#header_content > div:first-of-type").filter("h1"); 
    var h3Header = $("#header_content > div:last-of-type").filter("h3"); 
    var firstParaHeader = $("#header_content > div:first-child").filter("p:first-of-type"); 
    var lastParaHeader = $("#header_content > div:first-child").filter("p:last-of-type"); 

    function changeHeaderContent(num) { 
     switch (num) { 
      case 0: 
       h1Header.innerHTML = "The Trio"; 
       h3Header.innerHTML = "Creative design studio"; 
       firstParaHeader.innerHTML = "Creating the brand experience you & your audience deserve with Inbound Marketing."; 
       lastParaHeader.innerHTML = "We already work with over 130 clients."; 
       headerStatus = 1; 
       break; 
      case 1: 
       h1Header.innerHTML = "Create Brand"; 
       h3Header.innerHTML = "our true area of expertise"; 
       firstParaHeader.innerHTML = "We create simple, beautiful, and conversion focus designs for your customers."; 
       lastParaHeader.innerHTML = "And delivered more than 210 design projects."; 
       headerStatus = 0; 
       break; 
     } 
    } 
    setInterval(changeHeaderContent, 5000, headerStatus); 
}); 

Answer 1

あなたsetInterval命令だけ実際に一度実行されています。その時点では、headerStatusは0であるため、changeHeaderContentが呼び出されるたびに常に使用される値です。

各呼び出し時に値が更新されるように関数に値を正しく渡すには、必要なパラメーターで実際に呼び出す関数を呼び出すように構文を調整する必要がありますそれに渡された。これにより、閉鎖がheaderStatusの周りに形成され、呼び出しごとにその値が失われることはありません。

changeHeaderContentを閉じると、headerStatusを閉じてクロージャの利点を得ることができます。

(function(){ 
 
    var headerStatus = 0; 
 

 
    function changeHeaderContent(num) { 
 
    
 
    // Because headerStatus is used in this nested function and because it was declared 
 
    // in a higher order function, there is a closure around headerStatus (this makes 
 
    // headerStatus a "free variable"). However, the closure will only cause side-effects 
 
    // if this nested funciton "outlives" its parent function's lifetime. 
 
    
 
    switch (num) { 
 
     case 0: 
 
     headerStatus = 1; 
 
     break; 
 
     case 1: 
 
     headerStatus = 0; 
 
     break; 
 
     } 
 
    console.log("headerStatus is now: " + headerStatus); 
 
    } 
 
    
 
    // Now that the nested function has termintated and we are back in the higher order 
 
    // function's scope, the following syntax runs without any closures. Whatever the value of 
 
    // headerStatus is, that value will be passed to the next invocation of changeHeader. 
 
    
 
    // Based on the code, the value of headerStatus will be 0 (changeHeaderContent hasn't 
 
    // executed yet) and so changeHeaderContent will change it to 1. BUT... each time 
 
    // changeHeaderContent runs it won't be passed the updated value of headerStatus, this 
 
    // syntax just passes it once and that original value is used for each subsequent invocation. 
 
    
 
    // So, every time chagneHeaderContent is run, it's run with the original value of 
 
    // headerStatus, which was 0. Therefore, each invocation of changeHeaderContent will 
 
    // change it to 1. 
 
    setInterval(changeHeaderContent, 1000, headerStatus); 
 

 
}());

そして、今、提案して：ここで

setInterval(function(){ 
    // Call changeHeaderContent and pass the value of headerStatus to it: 
    changeHeaderContent(headerStatus); 
}, 5000); 

は異なる結果に構文結果のどの2つの異なるバージョン（説明については、インラインコメントを参照）の一例ですコード：

(function(){ 
 
    var headerStatus = 0; 
 

 
    function changeHeaderContent(num) { 
 
    
 
    switch (num) { 
 
     case 0: 
 
     headerStatus = 1; 
 
     break; 
 
     case 1: 
 
     headerStatus = 0; 
 
     break; 
 
     } 
 
    console.log("headerStatus is now: " + headerStatus); 
 
    } 
 
    
 

 
    setInterval(function(){ 
 
    // Because the function that will be executed every 5 seconds contains a reference to 
 
    // headerStatus (a free variable) and that function WILL outlive the higher order function 
 
    // where headerStatus was declared, it forms a closure around it and EACH time the 
 
    // function runs, it will use the last known value of headerStatus, thus allowing the 
 
    // old value to be used in determining the new value. 
 
    changeHeaderContent(headerStatus) 
 
    }, 1000); 
 

 
}());

Answer 2

私はScott Marcusがコードスニペットで正しいと思います。あなたのケースをconsole.logにすると、パラメータは明らかに参照ではなく値によって送信されることに気づくでしょう。したがって、常にケース0で終わります。このようにして、関数はクロージャとして渡され、headerStatusへの参照は最初の間隔でただ1つだけ読み込まれます。

ので：

setInterval(function() { 
    changeHeaderContent(headerStatus); 
},5000); 

そしてまた、要素の内容のために、あなたはおそらく、テキストのようなjQueryのメソッドを使用する必要があります（）またはより良いhtmlの（） ので：

case 0: 
    h1Header.html("The Trio"); 
    h3Header.html("Creative design studio"); 
    ... 

case 1: 
    h1Header.innerHTML = "Create Brand"; 
    h3Header.html("our true area of expertise"); 
    ... 

そして、すべての要素に対してこのようあなたは変更したい。 そしてまた、このjQueryの経由で要素を得ることについて、私はコンテキスト#header_contentを使用することをお勧めします：

var h1Header = $('h1', $("#header_content")); 
var h3Header = $('h3', $("#header_content")); 

私はこのようにそれをローカルにテストして、それは私の作品..