Verwendung von setInterval und clearInterval als Funktionen

Question

Ich benutze setInterval mit jQuery, um die Position eines Hintergrundbilds onLoad zu ändern, aber ich möchte es als Funktion verwenden, damit ich clearInterval aufrufen kann, wenn ein Element angeklickt wird und um die Funktion erneut aufzurufen, wenn auf ein anderes Element geklickt wird, aber panRight() nicht unter Last arbeitet.

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

Der folgende Code funktioniert wie beabsichtigt onLoad und ist das, was ich versuche, wie Funktionen Refactoring.

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

Answer 1

Sie können es wie folgt tun:

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

Hier var panInterval ist Timer-ID, die zurückgegeben bekommen, wenn wir setInterval nennen und welche nützlich sein können, um das Intervall