如何在jQuery中停止以下setInterval（）

Question

下面的代码将图像从屏幕顶部移到底部。 我希望这个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但我不知道要返回什么。

Answer 1

您需要存储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);

Answer 2

您可以在调用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> 

Answer 3

你可以这样做：

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