setInterval関数で要素を移動できません

Question

hoverイベントでバックグラウンド位置-xを変更する可能性のある小さな画像があります。そして、マウス放置を止めてください。しかし、setIntervalを使っても私のfuctuinは1回だけ実行されます。ここに私のコードです。誰か助けてくれますか？

let wave = document.querySelector('.wave'); 

wave.onmouseover = moveWave(); 

function moveWave() { 
    setInterval(function() { 
     wave.style.backgroundPositionX += 10 + 'px'; 
    }, 100) 
} 

Answer 1

問題は、以下の行である： wave.style.backgroundPositionX + = 10 + 'ピクセル'。

最初の呼び出しの後、wave.style.backgroundPositionXは次のようになります。 10pxの

次のコールの後、wave.style.backgroundPositionXは次のようになります。 10px10px - >間違ったフォーマットです。

正しい方法は次のとおりです。

var count = 10; 
let wave = document.querySelector('.wave'); 
wave.onmouseover = moveWave(); 

function moveWave() { 
    setInterval(function() { 
     count += 10; 
     wave.style.backgroundPositionX = count + 'px'; 
    }, 100) 
} 

Answer 2

var count = 10; 
let wave = document.querySelector('.wave'); 
wave.onmouseover = moveWave(); 
wave.onmouseleave = moveLeave(); 
var id; 

function moveWave() { 
    id = setInterval(function() { 
     count += 10; 
     wave.style.backgroundPositionX = count + 'px'; 
    }, 100) 
} 

function moveLeave() { 
    clearInterval(id); 
}