关于clearTimeout的疑问

<div>
<p>1This is a paragraph.</p>
<p>2This is another paragraph.</p>
<p>3This is another paragraph.</p>
<p>4This is another paragraph.</p>
</div>
$(function(){
function xx(){
    $("p").eq(0).animate({marginLeft:-100},1000,function(){$(this).detach().appendTo("div").css("margin-left","0px");timeout=setTimeout(xx,1000);})    
    }
xx();//执行xx

$("div").click(function(){
                clearTimeout(timeout);//点击过快导致cleartimeout多次合并成一次执行
                var xaa=Math.random();//随便执行一条语句
                
                setTimeout(xx,2000);//2000后继续执行xx

                })
})

问题是：xx是一个循环的函数，现在希望鼠标单击div后循环停止，执行一条语句，然后2000ms后继续执行xx，如何实现？？
上面的click代码不正确，当点击过快时，导致并未有效清除定时器，求指点

---

你确定代码不会报错？timeout都没声明吧。

function xx(){
    alert(1)
}
xx();//执行xx
var timeout ;
$("div").click(function(){
    clearTimeout(timeout);//点击过快导致cleartimeout多次合并成一次执行
    timeout = setTimeout(xx,2000);/
})