停止超时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);

Answer 2

您只需使用存储的值调用clearTimeout即可停止超时

clearTimeout(timeout);