jquery how to stop settimeout from looping - javascript

I want after my page loads to do a trigger click once and only once.
many posts swear that settimeout only fires once, but in my case it is infinite!
here is one of my many trials.
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
});
I have tried moving that into a function outside the document.ready and then add cleartimeout, but then it stops from firing at all:
$( document ).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").first().trigger('click');
},1000);
clearTimeout(t);
}
What am I doing wrong!?

use clearTimeout() inside the setTimeout().It clears the timeout after triggering the click
$(document).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").trigger('click');
clearTimeout(t);
}, 1000);
}
$("#btn1").on('click',function(){
console.log("Clicked");
});
Fiddle: http://jsfiddle.net/6G4pR/

use e.stopPropagation(), this might be because of event bubbling.
HTML
<button id="btn1">my button</button>
JS
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
$("#btn1").click(function(e){
console.log('clicked');
e.stopPropagation();
console.log(e);
})
});
CODE

Related

Set delay for the second click function jQuery

I want the second click function to be delayed by 500ms, where do I insert this?
$(document).ready(function(){
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
$('.acceptCta').click(function() { //I want the delay on this function.
$(this).parent().removeClass("open");
});
});
Tried this too, didn't work:
$(document).ready(function() {
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
setTimeout(function() {
$('.acceptCta').click(function() {
$(this).parent().removeClass("open");
});
}, 800);
});
You need to delegate and tell which element you are referring to when clicking and use that for setTimeout - removeClass function
var $this = $(this) // will be click function
setTimeout(function() {} does not know what is $(this) as we searching for the parents of the clicked event element.
$(document).ready(function() {
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
$('.acceptCta').click(function() {
//This needed
var $this = $(this)
//delay removeClass
setTimeout(function() {
$this.parent().removeClass("open");
}, 800);
});
});
setTimeout(function(){
//your code goes here
alert("Hello");
}, 3000);//here you can set the time in milliseconds
you can use the setTimeout Function

change a mouseenter event into a timed event

I have the following code that works excellent for a mouseenter event:
$(document).ready(function () {
$(".someClass").mouseenter(function () {
//does some stuff
}).mouseleave(function () {
//does some stuff
});
});
What I am looking for is to change the above so that it is a timed event and does not require the mouse to enter the DIV with the associated class.
Any help would be greatly appreciated.
Regards,
jmcall10
Something like this? (If that's the case, I'll add some comments)
$(function() {
$('.someClass')
.on('mouseenter', function() {
console.log('mouse entered');
})
.on('mouseleave', function() {
console.log('mouse exited');
});
setTimeout(function() { $('.someClass').trigger('mouseenter'); }, 2000);
setTimeout(function() { $('.someClass').trigger('mouseleave'); }, 4000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someClass">Enter your mouse here</div>
First define a timed event: setTimeout(fun, 1000);
Then trigger event which you want in fun: $('.someClass').dispatchEvent(new Event('mouseenter');
May can help you...

How to execute the same setInterval()

I have an issue with my setInterval(), my code is:
var1=0;
function addNum(){
var1++;
$('.number').text(var1);
}
$(function() {
$('.number').text(var1);
jQuery('#box').on('touchstart touchmove', function(e) {
mytimer = setInterval(function(){ addNum() }, 500);
});
jQuery('#box').on('touchend touchcancel', function(e) {
alert('lift up');
window.clearInterval(100);
});
});
I can't clearInterval()
How can I use the same setInterval for the next time?
Somebody knows, how to reuse it?
BR,
Christian
Change your clear function to window.clearInterval(mytimer);

Delaying the Submit button click using Jquery

I am new to Jquery and my Question is can i delay the click on the submit button for example, you cannot click the submit button for 1 second after submitting so I can prevent the Click spamming on the submit button
this is my Click event
$("#btnConfirmEditNo").click(function (e) {
e.preventDefault();
$('#editContactForm').validationEngine('hide');
editwnd.close();
});
also tried the settimeout() but it delays the closing of the window
This example may help you:
Using On - Off
function handleClick(evt) {
$( "#btn" ).prop( "disabled", true );
setTimeout(function() {
$( "#btn" ).prop( "disabled", false );
$('#btn').on('click', handleClick);
}, 1000);
$( this ).off( event );
}
$('#btn').on('click', handleClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
Using One
function handleClick(evt) {
$( "#btn" ).prop( "disabled", true );
setTimeout(function() {
$( "#btn" ).prop( "disabled", false );
$('#btn').one('click', handleClick);
}, 1000);
}
$('#btn').one('click', handleClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
You can register a callback function on a button and subsequently remove that callback using the jquery off method. This means that when the submit button is pressed, you can remove the event handler and then set a timer that will subsequently re-add it after a period of time when the timer fires. You can use the window.setTimer() function to register a function to be called after a period of time.
An alternate algorithm would be to have a class level "flag" that is set when the button is clicked and reset when a timer expires. In your handler for a button press, you would check the value of the flag and, if true, ignore the button press.
Basically setTimeout is used to handle the 1s off state.
Here are two examples:
Using .one()
var $btn = $('#btnConfirmEditNo');
function doSomething() {
// Do here whatever you want
setTimeout(function(){
$btn.one("click", doSomething);
}, 1000);
}
$btn.one("click", doSomething);
Using a flag
function doSomething() {
var el = this;
if(el.noClick) return;
el.noClick = 1;
// Do here whatever you want
setTimeout(function() { el.noClick = 0; }, 1000);
}
$('#btnConfirmEditNo').click(doSomething);

Ajax delay is not working

$(document).ready(function() {
setInterval($("#to").on("change keyup paste click mouseout", function() {
$.get('ajaxSearch.php', $("#form").serialize(), function(data) {
$('#result').html(data);
});
}, 3000);
});
ajax delay or setTimeout is not working. I want to delay on input field and run ajax after 3 sec but it is not working.
You should use setTimeout to delay the ajax request.
And if one of change keyup paste click mouseout event fired, you just cancel the previous delay and create a new one.
$(document).ready(function() {
var timer_id;
$("#to").on("change keyup paste click mouseout", function() {
if (timer_id) {
clearTimeout(timer_id);
}
timer_id = setTimeout(function() {
$.get('ajaxSearch.php', $("#form").serialize(), function(data) {
$('#result').html(data);
});
}, 3000);
});
});
Your syntax is wrong, also the setInterval() should be in the handler
$(document).ready(function () {
var interval;
$("#to").on("change keyup paste click mouseout", function () {
if (interval) {
return
};
setInterval(function () {
$.get('ajaxSearch.php', $("#form").serialize(), function (data) {
$('#result').html(data);
});
interval = undefined;
}, 3000);
});
});
Also if there is already a interval in progress, we need not have to add another call.
In your case you set deley to event handling ( and whyy you use setInterval but not setTimeout ? )
try
$(document).ready(function() {
$("#to").on("change keyup paste click mouseout", function() {
setTimeout(function(){
$.get('ajaxSearch.php', $("#form").serialize(), function(data) {
$('#result').html(data);
});
}, 3000);
});
});

Categories

Resources