Question

我使用setInterval和jQuery来改变背景图像onLoad的位置，但我想将它用作函数，所以我可以调用clearInterval来在单击一个元素时停止它并再次调用该函数当点击另一个元素但是panRight（）没有在加载时工作。

ngOnInit() {
    this.getWhatsUpHandler();
}

getWhatsUpHandler(){
    setInterval(getWhatsUp, 10000);
}

getWhatsUp() {
    this.service.getWhatsUp()
               .subscribe(
                 data => {
                    this.activities = data.activities;
                 },
                 error => { console.log("Error #333"); }
                 );
}

以下代码按照预期的方式工作，并且是我尝试重构为函数的内容。

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

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作为函数

1 个答案: