Javascript 已点击且未点击 4 秒

Question

我对我的代码有疑问。我想做的是，如果单击了某个按钮并且在 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;
});

Answer 1

在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>

一旦你点击按钮禁用属性定时器完成后启用返回属性

Answer 2

与其说设置时间间隔，倒不如说定时器会更好。例如：

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

Answer 3

将事件处理程序拆分为两个不同的函数（例如 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);

Javascript 已点击且未点击 4 秒

Javascript clicked and not been clicked for 4 seconds

javascript

if-statement

click

setinterval