Question

我有一个菜单，其子菜单在您点击按钮时会滑出。如果它还没有被点击，我希望它在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);
     }
   })

Answer 1

问题在于，每次调用click侦听器函数时，您都要创建一个新的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);
  }
})

Answer 2

这是未经测试的，因为我们没有您的标记或小提琴示例。

但是你可以使用delay jQuery函数而不是超时。

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

clearTimeout（）没有按预期运行

2 个答案: