带有时间和事件的 JavaScript 逻辑 [关闭]答案

【问题标题】：JavaScript Logic With Timing and Events [closed]带有时间和事件的 JavaScript 逻辑 [关闭]
【发布时间】：2015-07-21 09:12:33
【问题描述】：

有一个关于在 JavaScript 中使用 setTimeout() 和事件 .onclick() 的逻辑流的广泛算法问题。

基本流程：

当一个按钮在 3 秒内被点击 2 次时，一个 HTML 元素（当前可见）消失，在此之后，当同一个按钮按下图像重新出现并重复该过程

解决这个问题的最佳方法是什么？代码大纲表示赞赏。

已经为此工作了几个小时，我写的代码逻辑上不正确，不会有太大用处。

【问题讨论】：

请贴一些相关代码。当我们不知道您在做什么时，很难给您提示。
jsfiddle.net/g5gus7pt/1 这样的事情？在 3 秒内点击两次“0”，它将变为“1”。重复它来扭转它。如果按钮只需单击一次即可反转它，您可以相应地更改它。
jsfiddle.net/g5gus7pt/2这个，如果反转只需要一键。

标签： javascript html algorithm dom-events timing

【解决方案1】：

我希望这会有所帮助：

http://jsfiddle.net/kqzdn8xe/

$(document).ready(function(){
    $('#button1').click(function(){
        if (typeof(this.visibleFlag) == 'undefined') {
            this.visibleFlag = true;
        }
        var thisTimeClick = Date.now();

        if (this.prevClick && (thisTimeClick - this.prevClick < 3000) && this.visibleFlag) {
            this.visibleFlag = false;
            $('#div1').hide();
        } else if (!this.visibleFlag) {
            this.visibleFlag = true;
            $('#div1').show();
        }

        this.prevClick = thisTimeClick;
    });
});

【讨论】：

【解决方案2】：

我相信你在追求这样的东西；

我还包含了忽略第三次连续点击情况的逻辑（在第二次点击后 500 毫秒内），因为我假设您是在双击类似行为之后。

jQuery 双击事件也值得一看：https://api.jquery.com/dblclick/

<button id="buttonExample">Click me</button>
<br/>
<div id="imageContainer">Image</div>

<script type="text/javascript">

$('#buttonExample').click(function(){

 var timeNow = new Date().getTime();
 var lastClicked = parseInt($('#buttonExample').data("lastClicked")||0);
 var ms = timeNow - lastClicked;

 if($("#imageContainer").is(":visible")) {

  if(ms < 3000) {
    $("#imageContainer").hide();
  }

  $('#buttonExample').data("lastClicked", timeNow);

 }else if(ms > 500){

  $("#imageContainer").show();

 }

});

</script>

【讨论】：