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

Posted 2023-02-19

【中文标题】带有时间和事件的 JavaScript 逻辑 [关闭]

【英文标题】：JavaScript Logic With Timing and Events [closed]

【发布时间】：2015-07-21 09:12:33

【问题描述】：

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

基本流程：

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

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

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

【问题讨论】：

请贴一些相关代码。当我们不知道您在做什么时，很难给您提示。

jsfiddle.net/g5gus7pt/1 这样的事情？在 3 秒内点击两次“0”，它将变为“1”。重复它来扭转它。如果按钮只需单击一次即可反转它，您可以相应地更改它。

jsfiddle.net/g5gus7pt/2这个，如果反转只需要一键。

【参考方案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>