如何在setInterval()中停止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时存储该间隔的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 2

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