ここを参照してください:1ページに同時に設定できるjavascript setTimeout / setInterval呼び出しの数は?
基本的に、setIntervalの結果を変数に割り当てる必要があります。そうすることで、その変数でclearIntervalを使用できるようになります
この例では、その手法を使用しました。このようにすると、さまざまな要素に割り当てられた間隔を変更できます。最初に、保存された値があるかどうかを確認します。その場合、それらに対してclearTimeoutを呼び出します。
そこから、各ターゲットアイテムでsetIntervalを呼び出し、結果を配列に保存します。ユーザーが次にボタンを押したときにクリアできるようになります。
<!DOCTYPE html>
<html>
<head>
<title>Moving a couple of spans with different intervals</title>
<script type="text/javascript">
var myIntervals = [];
function Init()
{
if (myIntervals.length != 0)
{
for (var i=0, n=myIntervals.length; i<n; i++)
{
clearInterval(myIntervals.pop());
}
}
myIntervals.push(setInterval(function(){onMove('sp1');}, (Math.random()*500)>>0 ));
myIntervals.push(setInterval(function(){onMove('sp2');}, (Math.random()*500)>>0 ));
myIntervals.push(setInterval(function(){onMove('sp3');}, (Math.random()*500)>>0 ));
}
function constructStyleString(xPos, yPos)
{
var result = "margin-top: " + yPos + "px;";
result += "margin-left: " + xPos + "px;";
return result;
}
function onMove(tgtId)
{
var xPos, yPos;
xPos = Math.random() * 640;
yPos = Math.random() * 480;
var elem = document.getElementById(tgtId);
elem.setAttribute("style", constructStyleString(xPos, yPos));
}
</script>
<style>
span
{
position: absolute;
}
</style>
</head>
<body onload="Init();">
<button onclick="Init();">(Re)set item intervals</button>
<span id='sp1'>This is the first item</span>
<span id='sp2'>This is the second item</span>
<span id='sp3'>This is the third item</span>
</body>
</html>