停止超时JQuery

Question

我有以下代码:

<script type="text/javascript">
$("#contact_min").toggle(function(){
  $("#contact_min").animate({
    height: "300px"
  }, 1000 );
$(".arrow").html("&#x25bc;")
$(".popupcontent").html('foobar')
},
function(){
  $("#contact_min").animate({
    height: "28px"
  }, 1000 );
$(".arrow").html("&#x25B2;")
$(".popupcontent").html("")
});
</script>

<script type="text/javascript">
$(document).ready(function(){
   setTimeout(function(){
  $("#contact_min").animate({
    height: "300px"
  }, 1000 );
$(".arrow").html("&#x25bc;")
$(".popupcontent").html('foobar')
      }, 25000);

});
 </script>

这非常有效,您可以单击div并打开它,或者您可以等待25秒并打开它.但是当您单击它,然后等待25秒,您必须单击两次以再次关闭它.这是因为超时仍会打开框,即使您已经单击它也是如此.有没有办法在你点击框后停止超时,这样盒子在25秒后就不会打开？

Answer 1

使用 clearTimeout()

var tOut = setTimeout(function(){
                       $("#contact_min").animate({
                              height: "300px"
                       }, 1000 );
                       $(".arrow").html("▼")
                       $(".popupcontent").html('foobar')
      }, 25000);

然后要清除此超时,请执行此操作, clearTimeout(tOut);