JavaScriptをクリックして4秒間クリックしていない

私のコードについて質問があります。私がしようとしているのは、特定のボタンをクリックして4秒以内にもう一度クリックしないと、要素が表示され、別の要素が隠れている場合です。しかし、それが4秒以内にクリックされると、それは同じようにとどまる。私はSetInterval（）とClearInterval（）を使うべきだと思います。現在私は他のことをする2つの機能を持っています。多分私はそこで私の機能を果たすことができますか？JavaScriptをクリックして4秒間クリックしていない

うまくいけば私はそれを明確にしました。

現在の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; 
});

出典

2016-06-15 annaneedshelp

間隔を設定するのではなく、タイマーが良いと言います。例：

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

この方法で、タイマーを停止したり、タイマーを開始したりする場合は、上記の関数を他のシナリオで呼び出す必要があります。

例：

あなたはinit関数がある場合：

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

そして多分そうのようにタイマーを停止呼び出す：

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

出典

2016-06-15 09:21:39

タイマーですこの場合、より良いアプローチ、+1、。 –

タイマーの開始は機能しますが、「停止」機能は機能しません。これを自分のHTMLにどのように実装すればよいですか？ – annaneedshelp

停止したい場合は、clearTimer関数を呼び出してください。停止する必要があります。 –

uはボタンがタイマー終了後にプロパティを無効にする]をクリックしプロパティをバック有効にすると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>

で

出典

2016-06-15 09:15:10

...共通 –

はちょうど準備を削除して、クリックしたスクリプトを作るthatsの説明には、この必要性である、私の更新の答えをチェックし –

は、例えば（2つの異なる機能であなたのイベントハンドラを分割しfirstClickおよびsecondClick）。最初のハンドラは、4秒後に2番目のイベントリスナを追加して削除するだけです。この1回限りのタスクでは、setIntervalの代わりにsetTimeoutを使用します。タスクは4秒後ではなく1回だけ実行する必要があり、4秒ごとに実行する必要はありません。次のようにだから私は進むでしょう：OPはjQueryの解決を要求しません

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

出典

2016-06-15 09:44:05

JavaScriptをクリックして4秒間クリックしていない

答えて

関連する問題