如何将 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时都会返回它，可以用来清除间隔

如何将 setInterval 和 clearInterval 用作函数

How to use setInterval and clearInterval as functions

javascript

jquery

setinterval

clearinterval