jquery - 如何使用 while 循环在 for 循环中更新 innerHTML？

Question

我以为我的包里有这个……我猜我错了:

预期行为 - 页面加载，然后对于数组中的每个元素，它使用 setTimeout 更新我的 innerHTML 值

观察到的行为 - 在我的主机上，它似乎只更新了一次值，然后它在变得无响应之前破坏了我的 css。我发出了一个警报，看看它是否曾经在 jsFiddle 上运行过，但它似乎没有正在运行，所以还有 😰

标记:

<button type="button" id="ctaButton" class="cta btn btn-lg btn-success pulsate" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Get Started Today</button>

JS:

$(warmup());

function warmup(){
    //sanity check
confirm("working???");
    setTimeout(changeCTAtext, 3000);
}



 function changeCTAtext(){

    var ctaList = [ 'Complementary Quotes', 'Book Your Consultation', 'Get Started Today' ];
    var myField = document.getElementById("ctaButton");

    while (true){
        for (var i = 0; i<ctaList.length, i++;){
    setTimeout('myField.innerHTML = ctaList[i];', 1000);
        };
    };
};

这里是强制 fiddle按照通常的要求。

Answer 1

完全没有必要在循环内设置同步多次超时。
仅使用单个 setInterval 或调用一个函数而不是单个 setTimeout

您可以使用 setInterval()

轻松做到这一点

如果你想让你的代码更简单(没有迭代计数器)你可以像这样操作数组:

jQuery(function($){

  var $btn = $("#ctaButton"),
      ctaList = ['Get Started Today', 'Complementary Quotes', 'Book Your Consultation'];
  
  function changeCTAtext(){
    ctaList.push( ctaList.shift() ); // manipulate
    $btn.html( ctaList[0] );         // and use always the [0]th index
  };

  setInterval(changeCTAtext, 1000); // Start

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  id="ctaButton">Get Started Today</button>

使用 c 计数器并使用 ++c % array.length 循环

jQuery(function($){

  var $btn = $("#ctaButton"),
      ctaList = ['Get Started Today', 'Complementary Quotes', 'Book Your Consultation'],
      tot = ctaList.length,
      c = 0; // iterations counter
  
  function changeCTAtext(){
    $btn.html( ctaList[++c%tot] );
  };

  setInterval(changeCTAtext, 1000); // Start

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  id="ctaButton">Get Started Today</button>

使用 setTimeout() 是这样的:

jQuery(function($){

  var $btn = $("#ctaButton"),
      ctaList = ['Get Started Today', 'Complementary Quotes', 'Book Your Consultation'],
      tot = ctaList.length,
      c = 0; // iterations counter
  
  function changeCTAtext(){
    $btn.html( ctaList[c++%tot] );
    setTimeout(changeCTAtext, 1000); // ...and repeat every NNNms
  };

  changeCTAtext(); // Start

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  id="ctaButton">Get Started Today</button>