clearTimeout（）不能按预期运行

Question

I have a menu with a submenu that slides out when you click on a button. I want it to slide back in after 7s if it hasnt already been clicked back in. I want to reset the timer when it is clicked back in so that it starts at the beginning if it is clicked again.

    $(".connect").click(function(){
     if($(".slidy-social").css("right") === "0px"){
       $(".slidy-social").animate({right: "200px"}, 250);
       var timer = setTimeout(function(){
         if($(".slidy-social").css("right") !== "0px"){
           $(".slidy-social").animate({right: "0px"}, 250)
         }
       }, 7000)
     }
     else{
       clearTimeout(timer);
       $("#social").animate({right: "0px"}, 300);
     }
   })

Answer 1

The problem is that you're creating a new timer variable every time the click listener function is called. You need to declare the variable outside the function so it will be the same variable each time.

var timer;
$(".connect").click(function() {
  if ($(".slidy-social").css("right") === "0px") {
    $(".slidy-social").animate({
      right: "200px"
    }, 250);
    timer = setTimeout(function() {
      if ($(".slidy-social").css("right") !== "0px") {
        $(".slidy-social").animate({
          right: "0px"
        }, 250)
      }
    }, 7000)
  } else {
    clearTimeout(timer);
    $("#social").animate({
      right: "0px"
    }, 300);
  }
})

Answer 2

This is untested, as we do not have your markup or a fiddle example.

But you could use the delay jQuery function instead of a timeout.

$(".connect").click(function(){
    if($(".slidy-social").css("right") === "0px"){
        $(".slidy-social").animate({right: "200px"}, 250);
        if($(".slidy-social").css("right") !== "0px"){
            $(".slidy-social").delay(7000).animate({right: "0px"}, 250)
        }
    } else {
        $("#social").animate({right: "0px"}, 300);
    }
})