CODEWITHSUNDEEP
javascriptjquery
qadenza
qadenza

Reputation: 9293

event is executed twice instead of once

Click on the 5 and it will become 7-9-11...

I'm expecting 6-7-8...

Any help?

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>

Upvotes: 0

Views: 69

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55623

So the problem is you can "slow-click" things - hold the mousedown for a second or two, then let it go, and still result in a click.

The best way to solve the problem is to put a timeout before go_spin starts that you can clear when you click.

The drawback is your go_spinn doesn't start up as fast - i.e. you need to hold the mouse down for the duration of your timeout, in my example it was 200ms, before your go_spinn starts. Test it, you might be able to drop it back a little bit (to 150ms or so) to achieve what you want.

EDIT: By the way, I was just making an assumption on what you were trying to achieve - what were you actually trying to achieve with this code?

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>

Upvotes: 3

xam4lor
xam4lor

Reputation: 74

Just change your html code to <div id='count' onmousedown='go_spinn(event)'>5</div> so that you remove the onclick event.

Upvotes: 1

Related Questions