Ok perhaps someone could enlighten me as to what I am missing here guys. I have a text box which updates a jquery data table with ajax call based on user input. Obviously the desire is to only fire the ajax call when the user has finished typing.
However no matter what snippets I try from SO and elsewhere the timeout is ignored and the ajax fire immediately. I wonder if anyone might point me in the right direction.
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(alert("test"), 3000);
});
You have to pass a function to the timeout function as the first parameter. Now you're passing the result of the alert("test") call.
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(function(){ alert("test"); }, 3000);
});
This should work.
try this setTimeout( 'you need to pass function here', 300 )
var timer;
$("#search_query").on('keyup', function() {
clearInterval(timer); //clear any interval on key up
timer = setTimeout(hello, 3000);
});
function hello(){
alert("test");
}
Related
I need to trigger a window.open function on the click of body, but only if the click is after few seconds.
EXAMPLE:- if the second click is done immediately, it shouldn't open the window. but after 5 seconds, if the click is made, the window should open.
My code isn't working.
<script>
setInterval(myadFunction,5000);
function myadFunction()
{
$("body").click(function () {
window.open("https://www.google.com");
});
}
</script>
This is a wordpress website., and I entered this code before <body> tag.
Why isn't it working?
You can use a flag to simulate what you want. In this case "canClick" flag will do the job for you.Reset it back to true after your desired timeout.
var canClick = true;
$("body").click(function () {
if (canClick) {
window.open("https://www.google.com");
canClick = false;
setTimeout(() => {
canClick = true
}, 5000);
}
});
Let me know if you face any issue with this snippet.
You could try something like:
<button onclick="timeFunction()">Submit</button>
<script>
function timeFunction() {
setTimeout(function(){ window.open("https://www.google.com"); }, 5000);
}
</script>
It consists of this:
setTimeout(functionname, milliseconds, arg1, arg2, arg3...)
The following are the parameters −
functionname − The function name for the function to be executed.
milliseconds − The number of milliseconds.
arg1, arg2, arg3: These are the arguments passed to the function.
First of all. You should make sure that you are placing the code in the right place. Since it's Wordpress. That bugger really get on my nerves. Try putting it in the active theme.
var click_allowed = 0; //global var (you use const if supported)
setTimeout(function(){ click_allowed = 1; },5000);
jQuery('body').click(function(){
if(click_allowed) window.open("https://www.google.com");
});
jQuery has been used instead of $ for the selectors due to wordpress native jquery limitation.
you can use settimeout(function, millisecond)
I want to run a function with a timeout of 2000 ms. The function should just run while toggleButton is pressed.
When I run this function my CPU explodes:
do {
setTimeout(function () {
me.pushMockData();
}, 2000);
}
while (liveButton.getPressed() != false);
Your CPU explode because you create Timeout again, again and again really fast in your loop when button is pressed. If you want to run your function every 2 second :
You should test if the the button is pressed.
Use setInterval
Inside setInterval, check if the button is still pressed, if not, clearInterval
https://www.w3schools.com/jsref/met_win_setinterval.asp
If you just want to active your function 2 second later, use setTimeout inside if.
You are going about this all wrong, keep things simple and attach an event listener to the button and call setTimeout then.
HTML
<button id="my_button">Click Me</button>
JavaScript
document.getElementById('my_button').addEventListener('click', function () {
setTimeout(function () {
alert('Clicked!');
}, 2000);
});
JSFiddle
Live Example
It's because you are constantly calling the setTimeout function in the while loop.
var timeout;
if (liveButton.getPressed())
{
if (typeof timeout !== 'undefined') {
timeout = setTimeout(function () {
me.pushMockData();
}, 2000);
} else {
clearTimeout(timeout);
}
}
If you can catch the onPress and onRelease event, it would be better if you do following
onPress
var myTimeout = setTimeout( ... , 2000 )
onRelease
clearTimeout(myTimeout)
example: https://jsfiddle.net/jfefL4oo/1/
var playtop = setInterval(goright, 5000);
function goright(){
...
}
The above works.
Now, I need to interrupt the above by clicking on a button, do something on page, and ten seconds after click - activate the setInterval again.
$("#btngoright").click(function(){
clearInterval(playtop);
...
setTimeout(playtop, 10000);
});
But, once interrupted, setInterval is not activated again.
It's not working because playtop is the id that was returned when initially setting the interval.
The setTimeout method expects a function, not an id, therefore you should pass a reference to the goright function again:
setTimeout(goright, 10000);
If you want to activate the interval again after 10 seconds, you can set an interval and pass a reference to the goright function in an anonymous function:
$("#btngoright").click(function(){
clearInterval(playtop);
setTimeout(function () {
setInterval(goright, 5000);
}, 10000);
});
Nearly. It should be:
$("#btngoright").click(function(){
clearInterval(playtop);
setTimeout(function () {
playtop = setInterval(goright, 5000);
}, 10000);
});
This way you are putting control back into the playtop variable meaning that the interrupt function will work more than once.
There is a button that its function runs couple of setTimeout functions that they all run one by one. so I want to reset the setTimeout so if I press the button again, the whole process happens again.
How can I do it?
My example code:
function add(){
setTimeout(function() {
$(".line1").fadeIn(function(){
$(".lineBox").animate({width: "260px"},
function(){
$(".line2").fadeIn();
$(".text1").delay(250).fadeIn();
});
});
}, 500);
setTimeout(function() {
$(".heyyyyy").append("y");
}, 3000);
}
HTML::
<div onclick="add()"></div>
So how can I reset this setTimeout so if I run the add() function, it runs again ?
To control setTimeouut assign to it a global variable:
var cid = setTimeout(...);
When you need to reset it, call clearTimout first then setTimeout
clearTimeout( cid );
cid = setTimeout( ... ); //you must reassign it to same var if you plan to reset again.
Note setTimeout runs only once. Checkout setInterval if you're looking to run some code every few seconds.
script
$(document).ready(function () {
var meter_id = $("#MeterReadingTypes li a.link_active").attr("id");
var range_id = $("#DateRangeTypes li a.link_active").attr("id");
window.setInterval(PostMainChartValues(meter_id, range_id), 5000);
...
});
function PostMainChartValues(meter_id, range_type_id) {
$.ajax({
...
});
}
window.setInterval is not trigerred. If I write an alert in setInterval it works. What is the reason of this? Why function is not triggering? I tracked it with chrome DevTools, and there is no move.
The first parameter to setInterval should be a function (or an evalable string). Right now, you are calling PostMainChartValues() and passing its return value to setInterval().
Change it to:
window.setInterval(function() {
PostMainChartValues(meter_id, range_id);
}, 5000);
This is not an ajax issue. You are using in wrong mode the setInterval parameter.
Create an anonymous function like bellow:
window.setInterval(function () { PostMainChartValues(meter_id, range_id); }, 5000);