Question

如何在5秒后停止此过程？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    function changeBanner(){ 
        // my change banner code
    }
    window.onload = function () { setInterval(changeBanner, 100) };
</script>

所以目前我每100毫秒更换横幅。但我希望它在大约5秒后停止。

我认为setTimeout可以解决这个问题;

window.onload = function () { setTimeout(setInterval(changeBanner, 100), 5000) };

但这没什么区别。

Answer 1

我希望它在大约5秒后停止。

存储setInterval给出的返回值，并将其与clearInterval

一起使用

var timer = setInterval(changeBanner, 100);
setTimeout(function() {
    clearInterval(timer)
}, 5000);

还有几个库实现了函数包装器来实现相同的功能。例如，在underscore.js中，您可以使用_.before：

var changeBannerLimited = _.before(50, changeBanner);
var timer = setInterval(changeBannerLimited, 100);

请注意，与使用clearInterval相反，这将继续永远调用changeBannerLimited函数，但是在被调用50次（10 * 5秒）后，它将不再将调用传递给changeBanner。

在旁注中我选择了underscore.js，因为我很清楚并且因为它提供了很好的格式化annotated source code所以你可以很容易地理解它背后的真实情况。场景。

Answer 2

您可以将setInterval的返回值存储到变量中，以便以后可以取消它：

function changeBanner(){ 
    // my change banner code
}
window.onload = function () {
    var id=setInterval(changeBanner, 100);
    window.setTimeout(function() {
        window.clearInterval(id);
    },5000);
};

Answer 3

使用clearInterval。

window.onload = function () {
    var bannerInterval = setInterval(changeBanner, 100);
    setTimeout(function() {
        clearInterval(bannerInterval);
    }, 5000);
};

Answer 4

在变量中保留setInterval输出，以便能够调用clearInterval;

 window.onload = function () {

  var job= setInterval(changeBanner, 100) ;
  setTimeout(clearInterval(job), 5000)

};

X秒后过期或超时永不结束循环

4 个答案: