I'm able to detect a click on a button using jQuery
$('#myButton').click(function(){
// do something
});
but, when the user clicks many times on the button, it fires unnecessary intermediaries events.
I would like to fire the event only on the last click on the button.
Something like:
$('#myButton').lastClickOnASequenceOfClicks(function(){
// ignore the multiple clicks followed
// do something only on the last click of a sequence of clicks
});
With that, if the user clicks 10 times (with a little interval of time), it should fires an event only on the tenth click.
Each click resets the timer.
var timer;
$("#myButton").click(function () {
var timeToWait = 1000;
clearTimeout(timer);
timer = setTimeout(function () {
// do something only on the last click
}, timeToWait);
}
Update
Another way to solve this problem of handling 'multiple click events' generated by the user is to do what was mentioned in the OP comments section. do something on the first click THEN disable the button so the user cannot click it anymore (maybe also set a time for the button to become enabled again)
var timer, timeToWait = 5000, selector ="#myButton";
$(selector).click(function (e) {
$(this).attr("disabled", "disabled");
// do something
// Then wait a certain amount of time then remove the disabled attr on your button
timer = setTimeout(function () {
$(selector).removeAttr("disabled");
}, timeToWait);
})
Related
I have an element pop up in the screen on page load and it hides after 5 seconds. I'm trying to create logic where it'll hide if the user doesn't interact with the pop up, and if user does interact, it'll keep it shown, and if user leaves the element, the timer starts again to hide.
<div id="popup">
Some popup
<input type="email" placeholder="enter email" />
</div>
<div id="popup-button" style="display:none;">
button to open the popup
</div>
// on load, 5 seconds starts
var goTimeout = setTimeout(function(){
$('#popup').css("display","none");
$('#popup-button').css("display","block");
}, 5000);
goTimeout;
// when mouse enter's popup element and/or user types in input
// should turn off the setTimeout
$(document).on("touchstart click mouseenter keyup", "#popup", function(e){
e.stopPropagation();
e.preventDefault();
console.log(e);
clearTimeout(goTimeout);
});
// when user mouse leave's the popup the timer starts again, but
// if user is still focused within input field, don't start until
// user clicks outside of the element
$(document).on("mouseleave", "#popup", function(e){
e.stopPropagation();
e.preventDefault();
console.log(e);
clearTimeout(goTimeout);
goTimeout;
});
Was wondering if someone can help me with the logic, not getting it to work the way I like to
goTimer isn't a function but you're trying to call it like it is one at the end of your mouseleave section. Make a function that creates / starts the timer and you'll be good to go. Like this:
var goTimeout;
function myTimer() {
goTimeout = setTimeout(function() {
$('#popup').css("display", "none");
$('#popup-button').css("display", "block");
}, 5000);
}
myTimer();
Then just change the last line of your mouseleave section to be:
myTimer(); instead of goTimeout;
Here's a JSFiddle to check out.
You can use DOM elements like onmouseover, onmousedown, etc.
Also, the timeout declared at the end seems to be the error, it's more of a variable or count, than a function.
You can have something like,
Gotimeout=5;
clearTimeout(goTimeout);
I am using jquery ui spinner, I want to call a function on spinner stop event.
I do not want to call that function every stop event, only when the user stop clicking up or down arrow.
Change event works only the textbox loss the focus, I want when text box is on focus.
Thanks in Advance..
If you want your callback to be triggered after a sequence of clicks is over, you can use _.debounce for that. Here is the code and the plunker:
$(function(){
var expectedDelayBetweenClicks = 500;
var element = $("input");
element.spinner({
start: function(e, ui) {
$('.selected-value').text('Waiting...');
},
stop: _.debounce(function(e, ui) {
$('.selected-value').text(e.target.value);
}, expectedDelayBetweenClicks)
})
});
This guarantees that you callback will be triggered only after several clicks, if the delay between those clicks is 500 ms. You can decrease this delay or increase it based on how fast you expect users to click the spinner.
Using a triggered click on my website (Its not on the website not due to the bug).
Website: 3six-d.co.uk
setTimeout(function() {
$('a[href$="#about"]').trigger('click');
}, 5000);
However as you could possible guess, that works fine. Until someone click the Enter button faster than 5 seconds, and they goes to a different tab. Say I clicked enter then went to the contact form. After the 5 seconds it would then redirect me back to about us. If there a way that if the user has already clicked enter it stops the trigger?
Thanks
You can try this
var isClicked = false;
setTimeout(function() {
if (!isClicked) {
isClicked = true;
$('a[href$="#about"]').trigger('click');
}
}, 5000);
With the former approach you guarantee that the click is only triggered once. No matter how often the user clicks.
How about a global Boolean variable that is set to true once the trigger is clicked? If the global Boolean is true, it does not allow the trigger event to run again. And, when the global is set to true, another timer is started that resets it to false after five or six seconds?
Detect when a user click the "Enter" button (look this up, its easy) then clear the timeouts using:
var id = window.setTimeout(function() {}, 0);
while (id--) {
window.clearTimeout(id);
}
Is it possible to do this: suppose that there are a lot of same events fire a lot of times in a period of time, we will cancel all the previous event and only use the last one.
The last event will be for for one time only when there is no more event for 3 seconds.
For example: there is a button; we will let user click this button many times as they want and we will not disable this button. No matter how many times user have been clicking this we will consider it to be only one click count as the last click. The click event will be performed when there are no more clicks within 3 seconds.
What you are looking for is known as debouncing. For this task there is already a superb plugin/library from Ben Alman.
(function() {
var button = document.getElementsByTagName("button")[0],
func = Cowboy.debounce(1000, function() { console.log("click fired!"); });
button.addEventListener("click", func);
}())
fiddle
var domButton = document.getElementById('some-button'),
timeOut;
domButton.addEventListener('click', function(e) {
if (e.clientX && e.clientY) {
e.preventDefault();
clearTimeout(timeOut);
timeOut=setTimeout(function({document.getElementById('somebutton').click()},3000);
}
},false)
I would like to display a helpful DIV that basically shows the user how to accomplish something on a particular page, but only if the user has been idle for a period of time, say, 30seconds.
What I mean by "Idle" is:
Not clicking any links
Not right clicking anywhere
Exceptions:
I would like to exclude the following conditions from the Is User Idle rule:
User has scrolled up or down/left or right
User has pressed mouse button on an empty area on the site/ or on an element which has no source/link for example, an image with no hyperlink.
and, Pressing keyboard buttons
Can this be done? Or can we only detect when a particullar event occurs?
Any thoughts/suggestions/resources will be greatly appreciated.
Thank you
fairly basic...
var trigger = 30000
$.(function(){
setInterval('displayInf()',trigger );
$('body').bind('click dblclick keypress mousemove scroll', function(){
clearDisplayInf();
});
});
function displayInf()
{
$('body').append('<div>Your notification div</div>');
}
function clearDisplayInf()
{
trigger = clearInterval(trigger);
trigger = setInterval('displayInf()', 30000 );
}
that should do the trick - you could add some script to make the div removable and start the timer again once its removed but that just polishing up really..
Event in DOM would bubble from leaf to root, thus add a event listener on document would make sense.
But since we are possibiliy stop bubbling for click event in certain element, register click event on document may not work perfectly, in that case, register mousedown and mouseup event would help:
var timer; // create a timer at first
// restart timer on click
function startIdle() {
timer = setTimeout(function() { /* show div */ }, time);
}
if (document.addEventListener) {
document.addEventListener('mouseup', startIdle, false);
}
else {
document.attachEvent('onmouseup', startIdle);
}
// start the first timer
startIdle();