JavaScript/JQuery Div 延迟函数答案

【问题标题】：JavaScript/JQuery Div Delay FunctionJavaScript/JQuery Div 延迟函数
【发布时间】：2019-04-10 10:28:04
【问题描述】：

我为网站创建了星级评分，需要在用户点击评分后关闭 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 中，因此当它们被点击时，它当前正在运行该函数并关闭！

【问题讨论】：

以上代码均未关闭 div。是否要在延迟后再次显示？
对不起，我应该更清楚，我已经将 testFunction 传递到实际星级评分中的 onclick 中，所以当它们被点击时，它当前正在运行该功能并关闭！ @AliSheikhpour
$('#video-rating').delay(4000).hide(0); $('#video-rating').delay(0).show(0);
@Deepak 谢谢你，但遗憾的是没有工作。你知道如何在已经完成的 JS 函数中集成延迟吗？

标签： javascript jquery html css jsp

【解决方案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
}

【讨论】：

完美！非常感谢。
阿里，在我尝试将其改写为另一个问题之前。您知道是否可以创建它以便在用户选择更改答案时重置 2/3 秒？就目前而言，如果他们按下第一个星并切换到第二个，如果有意义的话，计时器仍然会像第一个一样运行。我试图将 setTimeout 函数包装在最后一个 else 语句中，但这不起作用。有什么可能的想法吗？
是的，我将完成当前答案以涵盖您的新问题。如果有帮助，您可以投票给答案。@JackC98
请再次检查答案。我添加了一些 cmets 和新行。@JackC98
我已经投了赞成票！我对您评论的新代码有疑问，现在在点击评级后它现在完全延迟了。 @AliSheikhpour

【解决方案2】：

改成

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

【讨论】：

它不会让我批准两个答案，但非常感谢，这很有帮助。

【解决方案3】：

使用这个 Jquery 函数来避免设置时间间隔

$("#video-rating").hide('slow');
           (or)
$("#video-rating").hide('fade');

【讨论】：