setIntervalとclearIntervalを関数として使用する方法

Question

jQueryでsetIntervalを使用して背景画像の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

あなたはこのようにそれを行うことができます。ここではvar panInterval

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

は、私たちがsetIntervalを呼び出し、どの間隔