Javascript点击了4秒没有被点击答案

【问题标题】：Javascript clicked and not been clicked for 4 secondsJavascript点击了4秒没有被点击
【发布时间】：2016-06-15 09:04:25
【问题描述】：

我对我的代码有疑问。我想要做的是，如果单击某个按钮并且在 4 秒内没有再次单击它，则会显示一个元素并隐藏另一个元素。但如果它在 4 秒内被点击，它保持不变，依此类推。我想我应该使用 SetInterval() 和 ClearInterval()。目前我还有另外两个功能可以做其他事情。也许我可以在那里工作？

希望我已经说清楚了。

当前的javascript代码：

var clicks = 0;
function clicks5times() {
  clicks = clicks+1;
  if(clicks == 6){
    document.getElementById('scherm3').style.display = 'block';
     document.getElementById('scherm2.2').style.display = 'none'; 
  }
}           

var clicked = false;
setInterval(function(){
    if (!clicked) {
    document.getElementById("scherm4").style.visibility = "visible";
    document.getElementById("scherm2.2").style.visibility = "hidden";
  }
},13000);

document.getElementById("buttontimer").addEventListener("click", function(){
    clicked = true;
});

【问题讨论】：

标签： javascript if-statement click setinterval

【解决方案1】：

我会说计时器会更好，而不是设置间隔。例如：

var clickTimer;

function startTimer() {
  clickTimer = window.setTimeout(function(){
      document.getElementById("scherm4").style.visibility = "visible";
      document.getElementById("scherm2.2").style.visibility = "hidden";
  },4000);
}

function stopTimer() {
   window.clearTimeout(clickTimer);
}

function restartTimer() {
   stopTimer();
   startTimer();
}

document.getElementById("buttontimer").addEventListener("click", function(){
    restartTimer();
});

这样当你想停止定时器或启动定时器时，你只需要在其他场景中调用上述函数即可。

例如：

如果你有一个初始化函数：

function init() {
 ...
 //some code
 startTimer();
}

也许像这样调用停止计时器：

function clicks5times() {
  ...
  stopTimer();
}

【讨论】：

在这种情况下，计时器是更好的方法，+1，。
定时器启动工作，但'停止'功能不起作用。我应该如何在我的 HTML 中实现它？
如果你想让它停止，调用 clearTimer 函数，它应该会停止。
我已经重命名了我的函数，如果这样更有意义的话。重要的部分是 clickTimer 变量应该在所有其他函数之间共享。
@annaneedshelp 如果对您有用，请接受我的回答。

【解决方案2】：

将您的事件处理程序拆分为两个不同的函数（例如firstClick 和secondClick）。第一个处理程序应该只添加第二个事件侦听器并在 4 秒后将其删除。对于这个一次性任务，请使用setTimeout 而不是setInterval，因为您只需要在 4 秒后而不是每 4 秒完成一次任务。所以我会按照以下方式进行：

var secondClick = function() {
     // DO WHATEVER YOU WANT TO HAPPEN AFTER THE SECOND CLICK
}

var firstClick = function() {

 // DO WHATEVER YOU WANT TO HAPPEN AFTER THE FIRST CLICK

 document.getElementById("buttontimer").addEventListener("click", secondClick);
 setTimeout(function() {
    document.getElementById("buttontimer").removeEventListener("click", secondClick);
    }, 4000);
};

buttonElement.addEventListener("click", firstClick);

【讨论】：

【解决方案3】：

在 Javascript 中

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>
<button id="buttontimer">fghfgh</button>

</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>
<button id="buttontimer">fghfgh</button>
<script>

document.getElementById('buttontimer').onclick = function(){
document.getElementById("buttontimer").disabled=true;
setInterval(function(){
    if (document.getElementById("buttontimer").disabled == true) {
     document.getElementById("buttontimer").disabled = false;
  }
},10000);

};
</script>
</body>
</html>

和jQuery

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){

    var button = $('<button>Click Me</button>');

    button.clicked = false;

    $('body').append(button);
    var clicked  = false;

    button.click(function(){


      button.clicked = true;
      button.prop('disabled', true);
    clicked = true
    setInterval(function(){
        if (clicked) {
         button.prop('disabled', false);
      }
    },10000);

    });


    });
    </script>
    </head>
    <body>

    </body>
    </html>

一旦你点击按钮在计时器完成后禁用该属性启用该属性

【讨论】：

常见的只是删除准备好的并单击制作脚本这需要解释，检查我的更新答案