clearTimeout() 未按预期运行答案

【问题标题】：clearTimeout() not acting as expectedclearTimeout() 未按预期运行
【发布时间】：2017-08-01 01:09:40
【问题描述】：

我有一个带有子菜单的菜单，当您单击按钮时会滑出。如果它还没有被重新点击，我希望它在 7 秒后滑回。我想在重新点击它时重置计时器，以便如果再次点击它，它会从头开始。

    $(".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);
     }
   })

【问题讨论】：

在这种情况下，我总是遇到超时问题。你试过间隔吗？
注意，您在两个不同的选择器.slidy-social 和#social 上调用.animate()。这就是你想要达到的目标吗？可以在 Question 中包含 HTML 吗？

标签： javascript jquery settimeout cleartimeout

【解决方案1】：

问题是每次调用点击侦听器函数时都会创建一个新的timer 变量。您需要在函数外部声明变量，以便每次都是同一个变量。

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);
  }
})

【讨论】：

如果这解决了问题，您应该接受答案。您还应该回到以前的问题并接受最有帮助的答案。