I'm trying to create a button with a timer to an alert. User clicks button, two seconds later an alert pops up.
My code is resulting in the alert appearing on page load, and then again two seconds later, regardless of button click.
var timer = setTimeout('timeUp()', 2000)
function timeUp() {
alert("Time's Up!");
}
document.getElementById("startGame").addEventListener('click', timeUp());
function timeUp() {
setTimeout(function(){
alert("Time's Up!");
}, 2000);
}
document.getElementById("startGame").addEventListener('click', timeUp);
It should be:
function timeUp() {
var timer = setTimeout('alert("Time\'s Up!")', 2000);
}
document.getElementById("startGame").addEventListener('click', timeUp);
[UPDATED]
I made you an example code pen :).
Simply a case of re factoring your original code a little. Take a look:
function timeUp() {
setTimeout(function(){
return alert("hi");
}, 2000);
}
document
.getElementById("startGame")
.addEventListener('click', timeUp);
Here is the link to the full codepen example.
Codepen example
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 the function continuously. But it only works first time properly. Is there any solution for working this function continuously?
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
}, 15000);
});
If the code inside the setInterval takes longer than the time you have set it will create another process before the function finishes messing everything up. So choosing setTimeout is actually better.
To make a function loops in setTimeout use a following syntax:
function function1() {
// something here
}
function runner() {
function1();
setTimeout(function() {
runner();
}, time);
}
runner();
Given the comment under the question explaining your goal:
I want to trigger a button to show a div after 15 secs when the page is loaded, and 50 secs later another trigger for closing the div. & I want to run this continuously
I would suggest that you chain setTimeout() calls instead of using setInterval() which will cause the events to overlap and become a mess. I'd also suggest that you call show() and hide() directly on the required elements instead of faking click events in the DOM. Try this:
function openBand() {
$('#yourElement').show();
setTimeout(closeBand, 50000);
}
function closeBand() {
$('#yourElement').hide();
setTimeout(openBand, 15000);
}
$(document).ready(function() {
setTimeout(openBand, 15000);
// or just call closeBand() here directly, if the element starts as hidden
});
You should change your current function with this one
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
}, 15000);
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
});
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");
}
I'm really new to jQuery but familiar with some other languages. I recently bought a quiz type script and I'm trying to add a simple 15 second timer to each question. It's only a fun quiz, so no need to worry about users playing with the javascript to increase time etc.
Basically, if a user does not pick a question within 15 seconds, it will automatically go on to the next question and the timer starts over again.
Answers have the .next tag, and when chosen it moves onto the next question as the code below shows (hopefully).
superContainer.find('.next').click(function () {
$(this).parents('.slide-container').fadeOut(500, function () {
$(this).next().fadeIn(500)
});
return false
});
The problem i have is if i use setInterval, i don't know how i can select the appropriate div again for fade it our and fade in the next one. I've tried the below code and a few similar scrappy idea's but it doesn't work, but maybe it will give a better idea of what I'm after though.
superContainer.find('.next').click(function () {
$active_count = $count;
countInterval = setInterval(function() {
$active_count--;
if($active_count <= 0){
clearInterval(countInterval);
$active_count = $count;
$(this).parents('.slide-container').fadeOut(500, function () {
$(this).next().fadeIn(500)
});
}
$('.question-timer').html($active_count);
}, 1000);
$(this).parents('.slide-container').fadeOut(500, function () {
$(this).next().fadeIn(500)
});
return false
});
I've only been using JQuery a day or two so excuse any obvious mistakes and bad code! Let me know if you need any other code or information
This is moderately tricky for a first jQuery project.
The knack (in this solution) is to factor out a goNext function that can be called in two ways - in response to a click event and in response to a 15 second setTimeout(), not setInterval().
$(function(){
var questionTimeout = null;
function goNext($el) {
clearTimeout(questionTimeout);
var $next = $el.next();
$el.fadeOut(500, function() {
if($next.length > 0) {
$next.fadeIn(500, function() {
questionTimeout = setTimeout(function() {
goNext($next);
}, 15000);
});
}
else {
afterLastQuestion();
}
});
}
function afterLastQuestion(){
alert("last question complete");
$start.show();
}
var $superContainer = $("#superContainer").on('click', '.next', function() {
goNext($(this).closest('.slide-container'));
return false;
});
var $start = $("#start").on('click', function(){
$(this).hide();
$superContainer.find(".slide-container")
.eq(0).clone(true,true)
.prependTo(superContainer)
.find(".next").trigger('click');
return false;
});
});
DEMO
The process is started by clicking a "start" link, causing the first question to be cloned followed by a simulated click on the clone's "next" link. This ensures that the (actual) first question is treated in exactly the same way as all the others.
I also included a afterLastQuestion() function. Modify its action to do whatever is necessary after the last question is answered (or times out).
You could keep the current question in a variable, resetting it on a next click and in the timer, e.g.
var $current;
superContainer.find('.next').click(function (e) {
e.preventDefault();
$(this).parents('.slide-container').fadeOut(500, function () {
$(this).next().fadeIn(500);
$current = $(this).next();
});
});
You'll just need to set it to your first question on initialisation, and remember to reset your timer on a next click
Also, it's usually preferable to use e.preventDefault() rather than return false.
How can after click on button show a message and next hide it after 30 seconds?
Like:
$('#message').live('click', function() {
$('#sm').hide();
$('#sm').hide().show('slow').html('You have successfully registered');
// how is hide "$('#sm')" after 30 seconds??
});
Please give me example in http://jsfiddle.net/
$('#message').live('click', function() {
$('#sm').hide().show('slow').html('You have successfully registered');
setTimeout(function(){ $('#sm').hide(); }, 30000);
});
JSFiddle Example
setTimeout(function() {
$('#sm').hide();
}, 30000);
in your third line you write:
$('#sm').hide().show('slow').html('You have successfully registered').delay(30000).hide();
hope it works
You are looking for setTimeout it takes a function and milliseconds as parameter. In your case it would be something like:
setTimeout(function() { $('#sm').hide() ; }, 30000);
Use either javascript's native setTimeout function or jQuery's delay function. If you choose the latter all you have to do is add:
.delay(30000).hide();
at the end of your existing code like so:
$('#sm').hide().show('slow').html('You have successfully registered').delay(30000).fadeOut();