如何在jQuery中停止下面的setInterval(）

How to stop the following setInterval() in jQuery

本文关键字：setInterval jQuery      更新时间：2023-09-26

下面的代码将图像从屏幕顶部移动到底部。我希望这个setInterval()函数停止一次y==-100，但我不确定如何。。。

var image = $('.background');
var y = 0;
setInterval(function() {
  if (y == -100) {
    //don't know what to add here
  }
  image.css('background-position', '0 ' + y + 'px');
  y--;
}, 100);

我想我需要使用clearInterval，但我不知道该返回什么。

您需要存储setInterval的返回值，然后可以将其传递给clearInterval。返回的值是对间隔的不透明引用，因此不应将其用于其他任何操作。

var image = $('.background');
var y=0;
var interval = setInterval(function(){
  if(y == -100) {
      clearInterval(interval);
  }
  image.css('background-position', '0 ' + y + 'px');
  y--;
}, 100);

您可以在调用setInterval时存储间隔的id，然后使用该特定间隔的id调用clearInterval：

var image = $('.background');
var y = 0;
var intervalId = setInterval(function() {
  if (y === -100) {
    clearInterval(intervalId);
  }
  image.css('background-position', '0 ' + y + 'px');
  y--;
}, 100);
.background {
  background-image: url('//placehold.it/200');
  width: 200px;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>

您可以这样做：

var image = $('.background');
var y=0;
var interval = setInterval(function(){
    if(y == -100) {
        clearInterval(interval);
    }
    image.css('background-position', '0 ' + y + 'px');
    y--;
}, 100);
相关文章：