Question

在JavaScript中使用setTimeout()和事件.onclick()对逻辑流程提出了广泛的算法问题。

基本程序：

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

出现这个问题的最佳方法是什么？ Ouline的代码表示赞赏。

现在已经工作了几个小时了，我编写的代码在逻辑上是不正确的，并且不会很好用。

感谢您的帮助！

Answer 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;
    });
});

Answer 2

我相信你是在追求这样的事情;

我还包含逻辑来忽略第三次连续点击的情况（在第二次点击的500ms内），因为我假设你是双击之后的行为。

值得一看的是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>

具有时序和事件的JavaScript逻辑

2 个答案: