javascript - 事件执行两次而不是一次

Question

点击5，它会变成7-9-11...

我预计 6-7-8...

有什么帮助吗？

function go_plus(e) {
  let obj = $(e.target);
  let a = parseInt(obj.text());
  a += 1;
  obj.text(a);
}

var setint = '';

function go_spinn(e) {
  setint = setInterval(function() {
    go_plus(e);
  }, 79);
}

$('#count').on('mouseleave mouseup', function() {
  clearInterval(setint);
});

#count {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='count' onclick='go_plus(event)' onmousedown='go_spinn(event)'>5</div>

Answer 1

所以问题是你可以“缓慢点击”东西 - 按住鼠标一两秒，然后放开，仍然会产生点击。

解决该问题的最佳方法是在 go_spin 启动之前设置一个超时，您可以在单击时清除该超时。

缺点是你的go_spinn启动速度不快 - 也就是说，您需要在超时期间按住鼠标，在我的示例中，在您的 go_spinn 之前为 200 毫秒开始。测试一下，你也许可以将其降低一点(到 150 毫秒左右)来实现你想要的。

编辑:顺便说一句，我只是对您想要实现的目标做出假设 - 您实际上想用这段代码实现什么？

function go_plus(e){
  let obj = $(e.target);
	let a = parseInt(obj.text());
  a += 1;
  obj.text(a);
}

var setint = '';
var startspin;

function go_spinn(e){
  startspin = setTimeout(function() {
    setint = setInterval(function(){go_plus(e);}, 79);
  },200);

}

$('#count').on('click mouseleave mouseup', function(){
   clearInterval(setint);
   clearInterval(startspin);
});

#count{
cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='count' onclick='go_plus(event)' onmousedown='go_spinn(event)'>5</div>