Question

我正在开发项目，我正在尝试以5秒的间隔执行循环语句。这是我到目前为止所得到的......

＆＃13;

$(document).ready(function(){
    $("#start").click(function(){
        for(var i = 0; i < 5; i++){
            setTimeout(function(){
                console.log("hello world")
            },5000)    
        }
    })
})

＆＃13;

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

＆＃13;

这里的问题是警报连续五次显示，而不是每五秒显示一次。我的目标是每五秒钟向你的世界提醒五次。你能帮我弄清楚我错过了什么吗？

Answer 1

您可以使用for循环，但需要提供不同的超时时间，以便它们在不同的时间运行。

＆＃13;

$(document).ready(function(){
    $("#start").click(function(){
        for(var i = 0; i < 5; i++){
            setTimeout(function(){
                alert("hello world")
            }, 5000 * (i + 1))    
        }
    })
})

＆＃13;

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

＆＃13;

Answer 2

请检查下面提到的解决方案。

var i = 1;
var interval = setInterval(
  function(){ 
  if(i<=5){
    alert('Hello World!');
    i++;
  }else{
     clearInterval(interval);
  }
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果不起作用，请告诉我

Answer 3

我已使用setInterval更新了答案，而不是for循环，您可以传递数据runTimer方法

function runTimer(callback, delay, repeat) {
    var i = 0;
    var timer = setInterval(function () {
       callback();
       i++;
       if (i == repeat) clearInterval(timer);
    }, delay);
}

$(document).ready(function(){
	$("#start").click(function(){
          runTimer(function(){
      	    alert('hello')
          }, 5000, 5);    
       })
});

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

SetTimout功能不正常

3 个答案: