如何每5秒更改一次文本

时间:2018-01-07 16:07:02

标签: jquery

我有一行文字,有一个跨度。我希望每隔5秒更新一次。 我做了一个剧本:



var texts = new Array();
texts.push("Text1");
texts.push("Text2");
texts.push("Text3");

var point = 0;

function changeText(){
  $('#cookie-alert .col h3 span').html(texts[point]);
  if(point < texts.length){
    point ++;
  }else{
    point = 0;
  }
  setInterval("changeText", 5000)
}

changeText();
&#13;
&#13;
&#13;

所以数组包含所有文本。 因此,第一个文本出现但不是其他文本。 我有一个错误:

  

&#34; ReferenceError:未定义changeText&#34; at line&#34; setInterval(&#34; changeText&#34;,5000)&#34;

我不明白我的错误在哪里

2 个答案:

答案 0 :(得分:1)

  1. 您必须将changeText作为函数而不是文本传递。
  2. 您必须在功能setInterval
  3. 之外致电changeText
  4. 根据建议,需要使用texts.length - 1因为你从0开始计算。
  5. var texts = new Array();
    texts.push("Text1");
    texts.push("Text2");
    texts.push("Text3");
    
    var point = 0;
    
    function changeText(){
      $('#cookie-alert .col h3 span').html(texts[point]);
      if(point < ( texts.length - 1 ) ){
        point++;
      }else{
        point = 0;
      }
      
    }
     
    setInterval(changeText, 5000); /*Call it here*/
    changeText();

答案 1 :(得分:0)

setInterval将函数的第一个参数作为其第一个参数,而不是将函数的名称作为字符串,如下所示:

setInterval(changeText, 5000)

但你真的应该在这个函数中使用setTimeout

&#13;
&#13;
var texts = new Array();
texts.push("Text1");
texts.push("Text2");
texts.push("Text3");

var point = 0;

function changeText(){
  $('h3').html(texts[point]);
  if(point < texts.length - 1){
    point ++;
  }else{
    point = 0;
  }
  setTimeout(changeText, 5000)
}

changeText();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> </h3>
&#13;
&#13;
&#13;

或简称为setInterval,如下所示:

&#13;
&#13;
var texts = new Array();
texts.push("Text1");
texts.push("Text2");
texts.push("Text3");

var point = 0;

function changeText(){
  $('h3').html(texts[point]);
  if(point < texts.length - 1){
    point ++;
  }else{
    point = 0;
  }
}
changeText();
setInterval(changeText, 5000)
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> </h3>
&#13;
&#13;
&#13;

编辑:为了完美地工作,你想要if if(point < texts.length - 1)所以它以相同的速率重复。