jquery setInterval 只运行一次

Question

function caroussel() {
$(".cosm-slider ul").animate({marginLeft: '-400px'}, 1500);
} 
var carossTrigger = setInterval(function() { caroussel(); },5000);

Answer 1

我很高兴你解决了它。供参考，但使用setTimeout()而不是setInterval()可能是明智的。无论结果如何，setInterval 都会反复尝试。因此，您可以告诉它以大于动画时间的频率移动滑块。最好将该函数调用为动画的回调。示例逻辑是：完成此动画后，再次调用它(延迟后(。

这是一个丑陋的例子，但像这样：

(function caroussel() {
window.i = window.i || 0;
var $slider = $(".cosm-slider ul");
var slideCount = $slider.find("li").length;
if(i++ && i<=slideCount){
$slider.animate({marginLeft: '-=100%'}, 1500, 
function(){setTimeout(function(){caroussel()},1000);}
);
} else {
i=1;
$slider.animate({marginLeft: '0px'}, 500, 
function(){setTimeout(function(){caroussel()},1000);}
);
}
})();

ul {width:1000%; list-style-type:none; margin:0; padding:0}
li {
border:1px solid red;
display:inline-block;
text-align:center;
width:10%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cosm-slider">
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div>