I have a form which does an AJAX action when submitting. Just after a user has submitted the form, I'd like to impose a minimal waiting time of 5sec to post one more time.
What the better way ? I made this script (doesn't work but I guess idea is here):
$("form#submit_under_wall"+array[1]).submit(function() {
var submit_timestamp=0;
var c = new Date();
var now = ISODateString(c);
if(now-submit_timestamp>5){
var d = new Date();
var timestamp_message = ISODateString(d);
submit_timestamp = timestamp_message ;
//AJAX ACTION
}else{ alert("Wait 5sec between each post."); }
return false;
});
This doesnt work because the timestamp is reset every time they submit, you need to move submit_timestamp outside of the function. Also, that 5 should probably be 5 * 1000
something like this (not tested):
var submitTime = (new Date()).getTime() - 5000; //let user submit if he clicks within 5s of page load
$("form#submit_under_wall"+array[1]).submit(function(e) {
var now = (new Date()).getTime();
if(now-submitTime > 5000){
submitTime = (new Date()).getTime();
//AJAX ACTION
} else {
alert("Wait 5sec between each post.");
}
e.preventDefault();
});
The easiest and most standard way would be to use Javascript native setTimeout method.
var last_action;
function ajax_action() {
last_action = Date.getTime();
// AJAX STUFF
}
$("form#submit_under_wall"+array[1]).submit(function(e) {
e.preventDefault(); // Sexier than 'return false'
if(last_action != undefined) {
setTimeout(ajax_action, Date.getTime()-last_action); // Wait for 5s before doing the action
} else {
ajax_action();
}
});
use window.setTimeout()
Wrap what you want to do in a function (eg function foo (){ alert('test'); })
Call it with a 5 second delay setTimeout(foo,5000)
Related
So, I got an infinite loop to work in this function using setInterval attached to an onClick. Problem is, I can't stop it using clearInterval in an onClick. I think this is because when I attach a clearInterval to an onClick, it kills a specific interval and not the function altogether. Is there anything I can do to kill all intervals through an onClick?
Here's my .js file and the calls I'm making are
input type="button" value="generate" onClick="generation();
input type="button" value="Infinite Loop!" onclick="setInterval('generation()',1000);"
input type="button" value="Reset" onclick="clearInterval(generation(),80;" // This one here is giving me trouble.
setInterval returns a handle, you need that handle so you can clear it
easiest, create a var for the handle in your html head, then in your onclick use the var
// in the head
var intervalHandle = null;
// in the onclick to set
intervalHandle = setInterval(....
// in the onclick to clear
clearInterval(intervalHandle);
http://www.w3schools.com/jsref/met_win_clearinterval.asp
clearInterval is applied on the return value of setInterval, like this:
var interval = null;
theSecondButton.onclick = function() {
if (interval === null) {
interval = setInterval(generation, 1000);
}
}
theThirdButton.onclick = function () {
if (interval !== null) {
clearInterval(interval);
interval = null;
}
}
Have generation(); call setTimeout to itself instead of setInterval. That was you can use a bit if logic in the function to prevent it from running setTimeout quite easily.
var genTimer
var stopGen = 0
function generation() {
clearTimeout(genTimer) ///stop additional clicks from initiating more timers
. . .
if(!stopGen) {
genTimer = setTimeout(function(){generation()},1000)
}
}
}
Live demo
This is all you need!
<script type="text/javascript">
var foo = setInterval(timer, 1000);
function timer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
$(document).on("click", "#stop_clock", function() {
clearInterval(foo);
$("#stop_clock").empty().append("Done!");
});
</script>
I'm trying the make a chrome extension in javascript. So far, my popup.js looks like this:
let bg;
let clock;
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('button1').addEventListener('click', butClicked);
bg = chrome.extension.getBackgroundPage();
//clock = document.getElementById("label1");
});
let timeStamp;
let isClockRunning = false;
function butClicked() {
let test = bg.getURL();
document.getElementById('test').innerHTML = test;
timeStamp = new Date();
isClockRunning = !isClockRunning;
runCheckTimer();
}
function runCheckTimer() {
var handle;
if(isClockRunning == true) {
handle = setInterval(updateClock, 1000);
}
else if(isClockRunning == false) {
clearInterval(handle);
handle = 0;
}
}
function updateClock() {
let seconds = bg.returnTimeSince(timeStamp);
document.getElementById("label1").innerHTML = "Seconds: " + seconds;
}
The program works just fine when I click the button once; it starts the timer. But when I click the button the second time, timeStamp gets set to 0, but the updateClock keeps running at the same interval; the interval doesn't get cleared even though I'm toggling the isClockRunning boolean. It's almost as if javascript is forgetting to run the else if part in runCheckTimer(). How can I fix this?
EDIT: On a sidenote, am I doing the timer thing the right way? Or is there a better way to do it? I basically want a timer to keep ticking every second since you've pressed the button, and then when you click it again it'll stop and reset to 0.
You have scoped handle to runCheckTimer. When runCheckTimer starts, it will create a new handle every time.
Move handle outside of the function.
var handle;
function runCheckTimer() {
if(isClockRunning == true) {
handle = setInterval(updateClock, 1000);
}
else if(isClockRunning == false) {
clearInterval(handle);
handle = 0;
}
}
I have a page where I fire an ajax request AND show a loading sign for the first 6 seconds after the user presses a button :
<button onclick="runLoader();"></button>
<script>
var startTime=(new Date).getTime();
function runLoader(){
runAjax();
var i=0;
var timer = setInterval(function(e){
i++;
//code for loading sign
if(i==3)
clearInterval(timer);
} ,2000);
}
function runAjax(){
$.ajax({
//
}).done(function(){
var timer2 = setInterval(function(){
var d = new Date();
var t = d.getTime();
if(t-startTime>=6000){
clearInterval(timer2);
// do X
}
},500);
}
}
</script>
I want to do action X only after both runLoader() has run for 6 seconds and runAjax() has resulted in a response, and no sooner.
Like, if runAjax() responds in 2 seconds, I still want to continue showing loading sign for 6 seconds and then perform X.
And if the loading sign has shown for 6 seconds, I want to wait for runAjax() to return for as long as it takes.
But using the Date() method is giving inaccurate results. For eg : It shows 7.765 s elapsed even when only 2 s have passed. I read somewhere I should use console.log(time) for better accuracy, but it doesnt work in <=IE9.
Is there a better way to approach this problem ?
Note: I am using setInterval() instead of setTimeout() because the loading involves cycling through an array of 3 elements, "Fetching", "Processing" and "Loading" each shown for 2 seconds :)
I would use deferreds and $.when:
function start(){
$.when(runLoader(), runAjax()).done(function() {
//both are now finished
});
}
function runLoader() {
//show loader here
var def = $.Deferred();
setTimeout(function() {
//hide loader here
def.resolve(true);
}, 6000);
return def.promise();
}
function runAjax() {
var def = $.Deferred();
$.ajax({...}).done(function(result) {
//handle response here
def.resolve(true);
});
return def.promise();
}
I would set a flag to mark it as "ready". There may be better ways to handle this, but this is just off the top of my head.
<script>
function runLoader(){
runAjax();
var i=0;
var timer = setInterval(function(e){
i++;
//code for loading sign
if(i==3)
clearInterval(timer);
} ,2000);
}
function runAjax(){
var timeElapsed = false;
setTimeout(function(){timeElapsed = true}, 6000);
$.ajax({
//
}).done(function(){
var timer2 = setInterval(function(){
if(timeElapsed){
clearInterval(timer2);
// do X
}
},500);
}
}
</script>
You can create a pre-caller function that is run on runLoader() and as callback of runAjax(), that will verify if the other action is complete, and then do action X. Example:
var ajaxDone = false;
var loaderDone = false;
function doActionX() {
//your action happens here
}
function tryToDoX() {
if (ajaxDone && loaderDone) {
doActionX();
}
}
function runLoader(){
loaderDone = false;
runAjax();
//show loading sign
setInterval(function(e){
//hide loading sign
clearInterval(timer);
loaderDone = true;
tryToDoX();
}, 6000);
}
function runAjax(){
ajaxDone = false;
$.ajax({
//whatever
}).done(function(){
ajaxDone = true;
tryToDoX();
}
}
It isn't necessary to make a recurring timeout and poll both statuses, because they only get completed once (in every run, i.e. booleans aren't set to false and true while waiting).
EDIT: This approach can be used to any asynchronous code that doesn't change status intermitently, even without jQuery.
I'm unable to figure out where a syntax logical error resides in the script furthest below. Essentially what it does is it alerts people that they must wait 1.5 seconds before they can answer a radio-button type question and automatically move on to the next page. No alert if they spend more than 1.5 seconds.
This script was written for only one click event, but I need it to work for two nested events, where clicking on a radio button option automatically triggers the "next" button to move on to the next page. For example if you take out the following event (and its end brackets), it works well:
$("[class*=bfasg] .radio").click(function(){
I've checked the syntax at Esprima to make sure the brackets are correct, so the problem lies elsewhere.
$(document).ready(function() {
minTime(1.5);
function minTime(minTime) {
var startTime = new Date();
$("[class*=bfasg] .radio").click(function(){$("#movenextbtn").click(function(){
var endTime = new Date();
if((endTime - startTime)/1000 <= minTime) {
alert('You must spend at least '+minTime+' seconds on the question.');
return false;
}
else {
return true;
}
});
});
}
});
Any experts out there who can detect the problem?
(See answer to updated question below)
It's not a syntax error. It's a logic error.
It becomes slightly clearer if you format the code consistently:
$(document).ready(function () {
minTime(1.5);
function minTime(minTime) {
var startTime = new Date();
// Hooking up a click handler
$("[class*=bfasg] .radio").click(function () {
// This code doesn't run until/unless someone clicks
// one of the `[class*=bfasg] .radio` elements.
$("#movenextbtn").click(function () {
var endTime = new Date();
if ((endTime - startTime) / 1000 <= minTime) {
alert('You must spend at least ' + minTime + ' seconds on the question.');
return false;
} else {
return true;
}
});
});
}
});
What you've done there is said "When someone clicks a [class*=bfasg] .radio element, hook up an event handler on the #movenextbtn element."
You probably don't want to wait to hook up the event until someone clicks on a radio button. If your goal is to hook up the click event on both sets of elements, combine them in the same selector as you would in CSS:
$(document).ready(function () {
minTime(1.5);
function minTime(minTime) {
var startTime = new Date();
$("[class*=bfasg] .radio, #movenextbtn").click(function () {
var endTime = new Date();
if ((endTime - startTime) / 1000 <= minTime) {
alert('You must spend at least ' + minTime + ' seconds on the question.');
return false;
}
});
}
});
(By the way, returning true from a jQuery event handler has no meaning, so I've removed it above.)
Below you've commented:
What happens is that I want clicking the radio button to automatically trigger the "Next" button for going to the next page since I have one question per page.
That doesn't fundamentally change things. You haven't shown what the button does to move to the next page, but you'd just put that code in the one click handler above. E.g., you still hook click on both the radio buttons and the button, and you still handle that event using common code. E.g.:
$(document).ready(function () {
minTime(1.5);
function minTime(minTime) {
var startTime = new Date();
$("[class*=bfasg] .radio, #movenextbtn").click(function () {
var endTime = new Date();
if ((endTime - startTime) / 1000 <= minTime) {
alert('You must spend at least ' + minTime + ' seconds on the question.');
return false;
} else {
// ****Move to next page here****
}
});
}
});
Alternately, you could have the radio button click trigger a click event on the button, like this:
$(document).ready(function () {
minTime(1.5);
function minTime(minTime) {
var startTime = new Date();
// Hook up `click` on the radio buttons
$("[class*=bfasg] .radio").click(function () {
// Respond to click by firing click on the #movenextbtn
$("#movenextbtn").click();
});
// Hook up `click` on the #movenextbtn
$("#movenextbtn").click(function () {
var endTime = new Date();
if ((endTime - startTime) / 1000 <= minTime) {
alert('You must spend at least ' + minTime + ' seconds on the question.');
return false;
}
});
}
});
I'm not a huge fan of firing synthetic events like that when you could use common logic, but it's an option.
function callMe() {
// Do Something
}
$(document).ready(function() {
callMe();
});
DECLARE FUNCTION outside of ready(), but then define FUNCTION inside of ready().it's better to define them outside of document ready. And, if you need to, place the implementation of the method within the document ready.
So, I got an infinite loop to work in this function using setInterval attached to an onClick. Problem is, I can't stop it using clearInterval in an onClick. I think this is because when I attach a clearInterval to an onClick, it kills a specific interval and not the function altogether. Is there anything I can do to kill all intervals through an onClick?
Here's my .js file and the calls I'm making are
input type="button" value="generate" onClick="generation();
input type="button" value="Infinite Loop!" onclick="setInterval('generation()',1000);"
input type="button" value="Reset" onclick="clearInterval(generation(),80;" // This one here is giving me trouble.
setInterval returns a handle, you need that handle so you can clear it
easiest, create a var for the handle in your html head, then in your onclick use the var
// in the head
var intervalHandle = null;
// in the onclick to set
intervalHandle = setInterval(....
// in the onclick to clear
clearInterval(intervalHandle);
http://www.w3schools.com/jsref/met_win_clearinterval.asp
clearInterval is applied on the return value of setInterval, like this:
var interval = null;
theSecondButton.onclick = function() {
if (interval === null) {
interval = setInterval(generation, 1000);
}
}
theThirdButton.onclick = function () {
if (interval !== null) {
clearInterval(interval);
interval = null;
}
}
Have generation(); call setTimeout to itself instead of setInterval. That was you can use a bit if logic in the function to prevent it from running setTimeout quite easily.
var genTimer
var stopGen = 0
function generation() {
clearTimeout(genTimer) ///stop additional clicks from initiating more timers
. . .
if(!stopGen) {
genTimer = setTimeout(function(){generation()},1000)
}
}
}
Live demo
This is all you need!
<script type="text/javascript">
var foo = setInterval(timer, 1000);
function timer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
$(document).on("click", "#stop_clock", function() {
clearInterval(foo);
$("#stop_clock").empty().append("Done!");
});
</script>