Код ниже перемещает изображение с верхней части экрана на нижнюю. Я хочу, чтобы эта 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, но я не знаю, что вернуть.

1
buydadip 19 Дек 2015 в 02:16

3 ответа

Лучший ответ

Вы можете сохранить идентификатор интервала при вызове setInterval, а затем вызвать 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>
1
Josh Crozier 18 Дек 2015 в 23:18

Вам необходимо сохранить возвращаемое значение из 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);
4
user3477804user3477804 18 Дек 2015 в 23:19

Ты можешь это сделать:

var image = $('.background');
var y=0;
var interval = setInterval(function(){
    if(y == -100) {
        clearInterval(interval);
    }
    image.css('background-position', '0 ' + y + 'px');
    y--;
}, 100);
1
Louay Alakkad 18 Дек 2015 в 23:19