点击N次后触发回调答案

【问题标题】：Trigger callback after clicking N times点击N次后触发回调
【发布时间】：2016-06-13 11:58:45
【问题描述】：

我是 Javascript 新手，我找不到我的问题的答案。如果您单击按钮 5 次，我的 javascript 是否可能会显示一个 div？如果是这种情况，我怎样才能做到这一点？

谢谢！

【问题讨论】：

点击后是什么？是的，这是可能的：为您希望用户点击的任何内容创建一个点击事件处理程序，并让它计算点击次数。
@nnnnnn 点击一个按钮。我需要 Jquery 吗？

【解决方案1】：

没有 jQuery：

document.addEventListener("DOMContentLoaded", function(event) {
   var button = document.getElementById('click_me');
   var elem = document.getElementById('message');
   var count = 0;

   button.addEventListener('click', function(e) {
       e.preventDefault();
       count++;
  
       if(count == 5){
           elem.style.display = 'block';
       }
    }, false); 
});

#message {
  background: #0f0;
  display: none;
  padding: 10px;
}

<button type="button" id="click_me">Click Me</button>
<div id="message">Hello World</div>

使用 jQuery：

$(function() {
  var count = 0;
  
  $('#click_me').click(function(e) {
    e.preventDefault();
    count++;
    
    if(count == 5) {
      $('#message').show();
    }
  });
});

#message {
  background: #0f0;
  display: none;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="click_me">Click Me</button>
<div id="message">Hello World</div>

【讨论】：

【解决方案2】：

var clicks = 0;

function myFunction() {
  clicks = clicks+1;
  if(clicks == 5){
    document.getElementById('target').style.display = 'block'; 
  }
}

<button onclick="myFunction()">Click me</button>
<div style="display:none;" id="target">You clicked 5 times</div>

【讨论】：

是否可以在一个按钮上放置两个 onclick？我在同一个按钮上还有另一个功能。
是的，只需用';'分隔它们，onclick="function1(); function2();"

【解决方案3】：

你需要这样吗？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
	n=1;
    $(".clickable").click(function(){
        if(n==5){
			alert("You clicked 5 times");
		}else{
		n++;
		}
    });
});
</script>
</head>
<body>
<button class="clickable">Click here 5 times</button>

</body>
</html>

【讨论】：

【解决方案4】：

通过一些函数组合，可以制作一个通用的点击处理函数来模拟真实的“dblclick”的行为方式，但需要自定义 N 次点击。

const buttons = document.querySelectorAll('button')

const onClick = (requiredClicks, timeLimit = 300) => cb => {
  let timer;
  let clicked = 0;
  
  return e => {
    // each time clicked, check if reached the goal
    if( ++clicked == requiredClicks ){
      cb(e)
      clicked = 0
    }
    
    clearTimeout(timer)
    timer = setTimeout(() => 
      clicked = 0 // reset the number of clicks after a traditional 300ms duration
    , timeLimit)
  }
}

// bind events to all buttons, by their index, which controls the number of clicks 
[...buttons].forEach(
  (button, idx) => button.addEventListener(    "click", onClick(idx + 1)(callback)    )
)

// call this callback after N clicks (depending on the button in the demo)
function callback(e){
  console.clear()
  console.log("clicked on button at index", e.target.name)
}

<h2>Click fast:</h2>
<button name='1'>Click once</button>
<button name='2'>Click twice</button>
<button name='3'>Click 3 times</button>
<button name='4'>Click 4 times</button>

【讨论】：