Disabling call to function for 5 seconds after triggering - javascript

I have a button that I want to disable from sending anymore calls to jquery while there is a function "active".
What happens is, every-time a user clicks on the button, the counter gets reduced by 1.
However this happens with a delay, see here the steps;
click button
Button gets disabled
5 seconds later counter gets reduced with one and button changes to enabled.
However, the problem right now is that, even while the button is supposed to be disabled, users can just click is X amount of times, and the counter gets reduced with that X amount of times after 5 seconds.
Meaning the calls still go through.
See here what I tried to do so far, but unfortunately with no success..
$( document ).ready(function() {
var enabled=true;
$(".myButton").click(function(){
if(enabled = true) {
setTimeout(function(){
var i = document.getElementById('counter2');
i.innerHTML = parseInt(i.innerHTML)-1;
$('.progress-bar').css("width", '+=' + '35px');
$(".myButton").attr('disabled','enabled');
$('.myButton').css('opacity', '1');
var enabled=true;
},5000)
$(".myButton").attr('disabled','disabled');
$('.myButton').css('opacity', '0.5');
var enabled=false;
} else { }
});
});

if(enabled = true) {
^
You meant to write == here. Or even better: if (enabled) as enabled is a boolean anyway.
Using = true is an assignment here as well. And as true is truthy the condition will always evaluate to true.

I don't think you need to track a variable to monitor the state of the button, because you already set an attribute to indicated that it's disabled. So you can just use that attribute as an indicator of it's state.
Also, you are doing this behavior on all buttons of class myButton. So I isolated the handler to just event.target which was the button that was clicked.
$(".myButton")
.prop('disabled',false)
.click(function(event){
// get the button that was clicked.
var btn = $(event.target);
if(btn.prop('disabled') === true) {
// it's already disabled, nothing to do
return;
}
// start a 5 second timer
setTimeout(function(){
var i = document.getElementById('counter2');
i.innerHTML = parseInt(i.innerHTML)-1;
//$('.progress-bar').css("width", '+=' + '35px');
// I've never seen += used like this ^^^ does it work?
var bar = $('.progress-bar');
bar.css("width", (bar.width() + 35) + 'px');
// after 5 seconds enable the button
btn.prop('disabled',false);
btn.css('opacity', '1');
},5000);
// disable the button until timer expires.
btn.prop('disabled',true);
btn.css('opacity', '0.5');
});

Related

How do I force a javascript event listener to terminate the function it is in?

So I've been working on a program for my final for an ap class and I'm using javascript and for some bizarre reason the eventlistener isn't working at all. I've been staring at this for actual hours now and trying to get it to stop terminate the function it is in so that it can go back up to the function that called it originally. And I'm not having any luck, I have like 2 days to figure this out someone please help
This is supposed to be the code that takes the id and figures out which thing the player is indicating but it's refusing to terminate this function. There are 7 buttons attached to the parent and it works as a one time click currently but refuses to leave after it's clicked. Please someone help...
function playerTurn(){
setTimeout(function(){
var roll = showRoll();
if(roll == 0){
return;
}
else if(roll > 0){
var id = "";
const parent = document.querySelector('#stoneSelects');
parent.addEventListener('click', function oneTimeClick(event){
//console.log(event.target.id);
id = event.target.id;
parent.removeEventListener(event.type, oneTimeClick);
if(id != ""){
console.log("User picked: "+id);
return;
}
});
}
}, 500);
}

How do I cancel an event handler in JavaScript or jQuery from another event handler?

When the submit button is clicked that event is also handled by some code that submits the form - I would share that code too but I'm having trouble finding it. My problem is that I want to be able to cancel the form submission from the button click event (as you can see I tried several methods of doing so), but instead what happens is that the validation message appears that the hours don't match up and then a few seconds later a message appears saying that the form was submitted.
$(document).ready(function() {
// find total hours
var reportedTotalHours = parseFloat($("#TotalHours").text());
if (!reportedTotalHours) {
reportedTotalHours = parseFloat($("#EventDuration").text());
$("#TotalHours").text(reportedTotalHours)
}
// handle button click
$('input[type=button]').on('click', function(evt) {
if ($(this).val() == 'Close')
return true;
var totalHours = 0;
$('select.dropdownQuestion').each(function(i, sel) {
var hours = $(sel).find(":selected").text();
var f = parseFloat(hours);
if (f != 0 && !Number.isNaN(f))
totalHours += f;
});
// validate that hours are within a quarter hour of each other
var difference = Math.abs(totalHours - reportedTotalHours);
if (difference >= 0.25) // discrepancy must be less than a quarter hour
{
alert("Total of hours for each activity must equal " + reportedTotalHours + ".");
evt.preventDefault();
evt.stopPropagation();
$("#SkipSave").val('true');
return false;
}
return true;
});
});
I think the problem might be that I'm in a button click event handler and I'm trying to cancel a form submit event instead, but if I change this:
$('input[type=button]').on('click', function(evt) {
to
$('form').submit(function(evt) {
then the validation never seems to happen at all.

Jquery Checkbox uncheck with if statement

I can't quite figure out why my code is not working here.
I have an if statements that checks if 1 or more check boxes have been checked, then if its true a function runs. The function allows a bar to slide down when the page scrolls to a certain height.
It works when I first visit the site after a refresh. i.e the bar is not visible, when I scroll, then when I check a box, it becomes visible.
However when I uncheck the box the bar is still visible!
How do I hide it, when the checkbox is unchecked?
I thought a line in the else statement like the below would work, but they don't ( I even tried to add an else if:
$(".userbar").hide(); //OR
$(".userbar").slideUp(); //OR
$(".userbar").off();
Here is my Code:
$(document).on('change', '#est', function (e){
// Get number of checkboxes checked.
var counter = $('input[type="checkbox"]:checked').length;
console.log("Checkboxs checked number: " + counter);
e.preventDefault();
if (counter >= 1 ) {
$(window).scroll(function() {
if ($(this).scrollTop() < 370)
{
$(".userbar").slideUp(100);
}
else
{
$(".userbar").slideDown(100);
}
});
} else if (counter == 0 ){
$(".userbar").hide();
}
});
The first time that counter >= 1, you bind a function to the window "scroll" event, and that function will decide if the bar will be visible or not. Even if later counter evaluates at zero, and you run the .hide(), the scroll handler you registered before will still be there and run again.
An easy way to fix this would be to add something like
else if (counter == 0 ){
$(window).off("scroll");
$(".userbar").hide();
}
Be aware that .off("scroll") will remove any handler for the "scroll" event. If you have others and you want to keep them, you might want to name your handler and remove it individually, like:
function myScrollHandler() {
if ($(this).scrollTop() < 370)
{
$(".userbar").slideUp(100);
}
else
{
$(".userbar").slideDown(100);
}
}
// ...
$(window).scroll(myScrollHandler);
// ...
$(window).off("scroll", myScrollHandler);

Prevent multiple clicks while animation is ongoing (stopPropagation & :animated)

I am asking after reading and following these answers.
jQuery prevent multiple clicks until animation is done
how to prevent click queue build up, using toggle in jquery? tried using bind/unbind('click')
Despite having e.stopPropagation(); and if ($element.is(':animated')){return false;} in place fast clicks bubble.
Here is my fiddle. Slow clicks work fine, fast clicks make it fail. What am I doing wrong please? How can I discard all fast clicks while the menu items are animated?
Your code was solid, however, you were adding the class BEFORE checking for animation.
I simply moved your animation check up, and prevented the click from even changing the class.
// jQuery 1.11.0 on DOM ready
var $hamburgerMenuButton = $('#burgerButton');
var $navTitle = $('.navigation-item');
var $score = $('.score');
$hamburgerMenuButton.click(function(e) {
e.stopPropagation();
if ( !$hamburgerMenuButton.hasClass('open')) {
console.log('hamburgerMenuButton does NOT have class open');
if ( $navTitle.is(':animated') ) {
$score.append('<br>animating ');
return false;
}
$hamburgerMenuButton.addClass('open');
console.log('class open ADDED to hamburgerMenuButton');
$score.append('<br>class open ADDED ');
var delay = 0;
$navTitle.each(function(){
$(this).delay(delay).animate({
'margin-left':'0px'
},500,'easeOutQuint');
delay += 33;
}); // animation end
$score.append('<br>clicked ');
} // if end
else {
console.log('hamburgerMenuButton does HAVE class open');
if ( $navTitle.is(':animated') ) {
$score.append('<br>animating ');
return false;
}
$hamburgerMenuButton.removeClass('open');
console.log('class open REMOVED from hamburgerMenuButton');
$score.append('<br>class open REMOVED ');
var delay = 0;
$navTitle.each(function(){
$(this).delay(delay).animate({
'margin-left':'10em'
},500,'easeOutQuint');
delay += 33;
}); // animation end
$score.append('<br>clicked again');
} // else end
}); // $hamburgerMenuButton click end
https://jsfiddle.net/gregborbonus/b2tw65hf/3/

Why is this JavaScript if statement always returning true?

I am trying to execute a block of code when a div is clicked for the first time, and then a different block when it is clicked the second time. My alert shows that the variable is being changed within the first block, but the first code block always executes.
If I change the variable manually, I can get the second block to execute.
var clickCount = 0;
// code for first click
if ( clickCount === 0 ){
$( '.link' ).click(function(){
alert( 'first click. clickCount = ' + clickCount );
clickCount = 1;
});
}
// code for second click
if ( clickCount === 1 ){
$( '.link' ).click(function(){
alert( 'first click. clickCount = ' + clickCount ); // never executes
// stuff
});
}
Your code says:
If the variable is 0
attach a click handler to the link which fires every time the link is clicked
That click handler stays there, even after the variable has changed. The condition is only evaluated once and the click handler is only attached once, but that's all that's necessary to keep triggering the attached click handler every time the link is clicked henceforth.
The second block is never executed, unless you run this whole block of code again that attaches the click handlers.
You probably just want to attach one click handler once, and inside that handler you check the value of clickCount and do something different based on its value.
var clickCount = 0;
$('.link').click(function () {
alert('clickCount = ' + clickCount);
if (clickCount === 0) {
clickCount = 1;
} else {
// stuff
}
});
This should work for you:
var clickCount = 0;
$('.link').click(function() {
if (clickCount === 0) {
alert('first click. clickCount = ' + clickCount);
clickCount = 1;
}
else {
alert('second and further clicks. clickCount = ' + clickCount);
}
});
You don't need to bind event twice. Once is enough. Just check inside of a click handler number of clicks and execute corresponding code.

Categories

Resources