JavaScript/JQuery Div延时函数

Question

我为网站创建了星级评级，需要在用户点击评级后关闭 div。我已经设法做到了，但需要在函数中添加延迟，以便在用户单击它后需要 2/3 秒。

我在使用 jquery 显示的 div 中加入了延迟，如下所示，但这次需要添加到 javascript 函数，我不知道从哪里开始。

function testFunction() {
  var x = document.getElementById("video-rating");
  if (x.style.display === "none") {
      x.style=display = "block";
  } else {
      x.style.display = "none";
  }
}

这是我的 JSP 文档中的 jquery。如果有一种方法可以将 jquery 添加到函数中，那会很棒，但我不确定。

<script>
    $('#video-rating').hide(0).delay(4000).show(0);
</script>

编辑 我应该说得更清楚，我已经将 testFunction 传递给实际星级评分中的 onclick，因此当它们被点击时，它当前正在运行该函数并关闭!

Answer 1

使用setTimout:

// Define a timer as global variable so we can cancel it anywehere:
var mytimer; 

function testFunction() {
  //Clear previous click effect if exists:
  clearTimeout(mytimer);

  var x = document.getElementById("video-rating");

  //assigning the timeout to global variable we created before:
  mytimer = setTimeout(function(){
       if (x.style.display === "none") {
           x.style=display = "block";
       } else {
           x.style.display = "none";
       }
   },666); //666 miliseconds equals to 2/3 second
}

使用 Jquery 延迟:

function testFunction() {
    $("#video-rating").delay(666).hide(0); //or toggle(0) if you want to show on next click
}

如果你想取消之前的点击效果可以在jquery队列中加入stop():

function testFunction() {
    $("#video-rating").stop().delay(666).hide(0); //or toggle(0) if you want to show on next click
}