Question

单击图像后，我使用.slideToggle显示div。我希望div在最后一次点击切换后10秒消失。问题是，如果我单击图像几次，持续时间是第一次点击后的10秒，而不是最后一次。如果您查看小提琴（我使用较短的测试时间）并单击图像几次，您将看到我的意思。

有没有人知道我怎么能按要求工作？任何帮助将不胜感激！

小提琴：https://jsfiddle.net/7fy536nv/

...要求

div应该显示10秒然后消失
如果再次点击图片，div将消失
如果点击div之外的内容，div将消失

HTML

<div class="box-new">
    <a href="box-link" id="box-link">
        <img src="https://dummyimage.com/100x60/ff0000/fff.png">
    </a>
</div>

<div id="empty-box">jkhsahg akjfhsajk fhas jklsad flkasd hfjkashd fjka sdkjfh adskjfhs dakjfh kafh sdah dhjaf</div>

CSS

body, html {
    margin: 0;
}

#empty-box {
    display: none;
    position: absolute;
    background: #000;
    top: 60px;
    width: 240px;
    padding: 20px;
    left: 0;
    color: #fff;
    text-align: center;
    font-family: "open sans", "arial";
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    z-index: 1;
}

JS

$('#box-link').click(function(event){
    event.stopPropagation();
    $("#empty-box").slideToggle(400);
    setTimeout(function() { 
        $("#empty-box").slideUp(); 
    }, 5000);
    return false;
});
$("#empty-box").on("click", function (event) {
    event.stopPropagation();
});
$(document).on("click", function () {
    $("#empty-box").slideUp(400);
});

Answer 1

setTimeout函数返回一个可以使用clearTimeout取消的值。

因此，在您的代码中，存储返回值，每次单击它时，取消先前的超时并重新启动。

var timeout = null;
function test()
{
    if( timeout !== null )
          clearTimeout(timeout);
    timeout = setTimeout(..., 10000);
}

Answer 2

将您对setTimeout的调用分配给外部作用域中声明的变量，并在每个后续事件中使用clearTimeout清除它：

var timeout;
$('#box-link').click(function(event){
    clearTimeout(timeout);
    event.stopPropagation();
    $("#empty-box").slideToggle(400);
    timeout = setTimeout(function() { 
        $("#empty-box").slideUp(); 
    }, 5000);
    return false;
 });

Answer 3

这很简单，真的。关键是将您的setTimeout放在variable并调用clearTimeout(variable)。

示例：

＆＃13;

let someVar = false,
    someTime = 5000,
    msgTimer = document.getElementById('timer'),
    timer, 
    current,
    displayTimer = false;

$('.yourButton').on('click', someFunc)

function someFunc() {
  if (someVar) {
    clearTimeout(someVar)               // <<< juice is here
    console.log('cleared timeout!')
  }
  timer = performance.now()
  someVar = setTimeout(function () {
    clearInterval(displayTimer)
    console.log(someTime / 1000 + 
    ' seconds passed since last click...')
    someVar = false
    displayTimer = false
    msgTimer.innerHTML = ''    
  }, someTime)

  /**
   * ¯\_(ツ)_/¯
   * ignore past this point, rest is timer
   *
   * ˙ʇᴉ pǝǝu ʇ,uop no⅄ ˙ʎllɐǝɹ
   **/

  if (displayTimer) { 
    clearInterval(displayTimer)
    displayTimer = false
  }
  displayTimer = setInterval(function () {
    current = performance.now()
    msgTimer.innerHTML = Math.max(timer + 5000 - current,0)
    .toFixed(2) + 'ms'
  }, 15)
}

＆＃13;

#timer {
  font-family: monospace;
  text-align:right;
  display: inline-block;
  width: 100px;
  font-size: 1.2rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="yourButton">Don't click. Think.</button>
<span id="timer"></span>

＆＃13;

将间隔缩短至5秒，以加快测试速度。

Answer 4

这是一个显示div最多10秒的解决方案......

如果用户在此延迟之前的任何地方点击，则隐藏它如果用户经常点击或重复点击，延迟没有问题。
因为我照顾了重置。

我创建了一个CodePen，并在购物车链接旁边显示了一个计时器，以显示时间的流逝这里有一个CodePen，代码与下面的代码段完全相同，如果你想玩它的话。

var emptyCart = $("#emptyCart");
var cartTimer;
var carMaxTime = 10000;

// Function to hide the cart
var hideCart = function(){
  emptyCart.dequeue().slideUp("slow");
}

// Function to show the cart
var showCart = function(){
  emptyCart.dequeue().slideDown("slow");
  clearTimeout(cartTimer);            // Just to be sure We have only one timer running
  cartTimer = setTimeout(function(){
    hideCart();
  },carMaxTime);
}

// Function to handle click on the cart link
$("#clickCart").click(function(){
  $(document).off("click",hideCart());  // Just to prevent a slideUp which would counter-act a slideUp

  if(emptyCart.is(":hidden")){
    showCart();
  }
  setTimeout(function(){                // 1ms delay to use this event handler on next click.
    $(document).on("click",function(){
      hideCart();
      $(document).off("click",hideCart());  // Unbind this handler once used.
    });
  },1);
});

#emptyCart{
  display:none;
  width:100px;
  background:#000;
  color:#fff;
  height:30px;
  margin-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="clickCart">
  <a href="#">Cart</a>
</div>
<div id="emptyCart">
  No items
</div>

如何在上次单击切换时激活setTimeout？

4 个答案: