しばらくしてから機能を停止する

虹の色が1400ミリ秒ごとに変わる単純な背景を作っています。これはthisのようでした。ここでは、コードです：しばらくしてから機能を停止する

function onload() { 
     var color = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; 
     var body = document.getElementById('body'); 
     var i = 0; 
     function rainbow() { 
      if(i == color.length) {i = 0;}; 
      body.style.backgroundColor = color[i++]; 
      setTimeout(rainbow, 1400); 
     }; 
     rainbow(); 
}; 

onload();

しかし、6049ミリ秒のため、この機能を実行した後、私は背景が50ミリ秒の間隔の代わりに、1400ミリ秒に変更します。どうすればいい？

出典

2017-07-09 Conner Dassen

このように別のタイマーで間隔を変更することができます。

function onload() { 
 
    var color = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; 
 
    var body = document.getElementById('body'); 
 
    var i = 0; 
 
    var interval = 1400; 
 

 
    function rainbow() { 
 
     if (i == color.length) { 
 
      i = 0; 
 
     }; 
 
     body.style.backgroundColor = color[i++]; 
 
     console.log("Interval is: " + interval); 
 
     setTimeout(rainbow, interval); 
 
    }; 
 

 
    var intervalTimer = setTimeout(function() { 
 
     interval = 50; 
 
     clearTimeout(intervalTimer); 
 
    }, 6049); 
 

 
    rainbow(); 
 
}; 
 

 
onload();

<body id='body'> 
 
</body>

出典

2017-07-09 09:57:34 H77

初期間隔は1400msで、あなたは6049ms後に変更したい、50msのへの変更は5番目と6番目の色の変化（0msと、1400ms、2800msの間で起こる意味しているので、、4200ms、5600ms、7000ms）。つまり、iインデックスを使用して、の間隔を(i < 6 ? 1400 : 50)に設定することができます。

function onload() { 
 
    var color = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; 
 
    var body = document.getElementById('body'); 
 
    var i = 0; 
 

 
    function rainbow() { 
 
    document.body.style.backgroundColor = color[i++ % color.length]; 
 
    setTimeout(rainbow, (i < 6 ? 1400 : 50)); 
 
    }; 
 
    rainbow(); 
 
}; 
 

 
onload();

出典

2017-07-09 10:10:31

しばらくしてから機能を停止する

答えて

関連する問題