如何使用setInterval和clearInterval作为函数

Question

我使用 setInterval 和 jQuery 来更改背景图像 onLoad 的位置，但我想将其用作函数，这样我可以在单击一个元素时调用clearInterval 来停止它，并在单击另一个元素时再次调用该函数单击但 panRight() 在加载时不起作用。

function moveImage() {
var x = 0;
    x-=1;
    $('.bg-img').css('background-position-x', x + 'px');
}

function panRight(){
  setInterval(moveImage(),25);
}

// moveImage onLoad
panRight();

$("#stop-animation").click(function(){
  clearInterval(panRight);
});

$("#start-animation").click(function(){
  panRight();
});

以下代码按预期 onLoad 工作，并且是我尝试将其重构为函数的代码。

$(function(){
  var x = 0;
  setInterval(function(){
      x-=1;
      $('.bg-img').css('background-position', x + 'px 0');
  }, 25);
})

Answer 1

你可以这样做：

function moveImage() {
    var x = 0;
    x -= 1;
    $('.bg-img').css('background-position-x', x + 'px');
}

var panInterval; // timer id

function panRight() {
  panInterval = setInterval(moveImage, 25);
}

// moveImage onLoad
panRight();

$("#stop-animation").click(function() {
  clearInterval(panInterval);
});

$("#start-animation").click(function() {
  panRight();
});

这里

var panInterval

是定时器id，每当我们调用

setInterval

时都会返回它，并且可以用来清除间隔