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：

＆＃13;

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

＆＃13;

.background {
  background-image: url('//placehold.it/200');
  width: 200px;
  height: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>

＆＃13;

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);

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

3 个答案: