<div class="wait">Wait</div>
<div class="waitDownloadLink"></div>
$(document).ready(function()
{
var secondNormal = 40;
var refreshIntervalId;
refreshIntervalId = setInterval(function() {
secondNormal -= 1;
$(".wait").text(secondNormal);
}, 1000);
setTimeout(function() {
clearInterval(refreshIntervalId);
$(".waitDownloadLink").text("Click me to download");
}, secondNormal * 1000);
});
When I start running the code and stay on the webpage, the code seems too work perfectly (or nearly). However, when I surf on other webpage right after I started the code, the timer is stuck between 12 - 18 second and then stops running. Why does this happen? And is there any solution to solve this?
https://jsfiddle.net/s1zf18co/
Browsers typically pause or reduce thread priority for Javascript running in tabs that aren't visible. My guess is that it's a power saving measure for laptops and other things, but they all have done this for years now. This question has an incredibly thorough investigation into the issue.
The solution is to use web workers which don't get paused. See the Mozilla documentation for more information.
I cannot seem to replicate the bug, however I believe that using the Date object may fix it:
var getDateTimeInSeconds = function() {
return Math.floor(Date.now() / 1000)
};
$(document).ready(function() {
var numOfSeconds = 40;
var countFrom = getDateTimeInSeconds();
var countTo = countFrom + numOfSeconds;
var refreshIntervalId = setInterval(function() {
var secondsLeft = countTo - getDateTimeInSeconds();
if (secondsLeft < 0) {
$(".wait").text(0);
$(".waitDownloadLink").text("Click me to download");
clearInterval(refreshIntervalId);
} else {
$(".wait").text(secondsLeft);
}
}, 1000);
});
Fiddle: https://jsfiddle.net/s1zf18co/1/
there is one working solution, try this and c if it is good enough, it is ok with leaving page problem, edit on end condition.
$(document).ready(function () {
var secondNormal = 40;
var refreshIntervalId = setInterval(function () {
setTimeout(function () {
if(secondNormal >0) {
secondNormal -= 1;
}
}, 1000)
$(".wait").text(secondNormal);
}, 1000);
});
Aside from Mordred's answer, in this case you may try using JS Date object to correctly estimate time. Check out this question.
Related
As the title suggests I'm stuck with a MouseDown problem.
What I want in "pseudocode"
While ("#arrowUp").mouseDown(function() {
counter++; //One time directly when pressed
if(MouseDownTime > 500){ //500ms that is
setTimeOut({counter++}, 75); //Meaning, every 75ms counter++
}
}
I have been looking around at Stack Overflow for over two days now. And I succeeded to increment every 75ms, but then I couldn't build in the if(MouseDownTime > 500)-statement, while still being able to increase the counter every 75ms after the 500ms.
$("#tempUp").mousedown(function() { //When longer pressed, automatically faster increase Temperature
int = setInterval(editTemp(currTemp+1), 250);
})
.mouseup(function() {
clearInterval(int);
numberOfRepeats = 0;
});
This is code I have of of my function so far. Could anyone help me out? Or am I asking the question in a wrong way? (non-constructive)
If I understand you correctly you can make use of a combination of setTimeout and setInterval, like so:
$(document).ready(function ()
{
var temp = 0;
var to = null;
var iv = null;
$("#ClickMe").on("mousedown", function ()
{
temp++;
$("#Temp").html(temp);
to = setTimeout(function ()
{
iv = setInterval(function ()
{
temp++;
$("#Temp").html(temp);
}, 75);
}, 500);
}).on("mouseup mouseleave", function ()
{
clearTimeout(to);
clearInterval(iv);
});
});
See this FIDDLE for an example.
EDIT: Added the mouseleave event as well as suggested by José F. Romaniello.
just need a little help here. My problem is, how can I count the seconds when i hover a specific element. Like for example when I hover a button, how can i count the seconds did i stayed in that button after I mouseout?
An alternate solution using setInterval. DEMO HERE
var counter = 0;
var myInterval =null;
$(document).ready(function(){
$("div").hover(function(e){
counter = 0;
myInterval = setInterval(function () {
++counter;
}, 1000);
},function(e){
clearInterval(myInterval);
alert(counter);
});
});
A simple example
var timer;
// Bind the mouseover and mouseleave events
$('button').on({
mouseover: function() {
// set the variable to the current time
timer = Date.now();
},
mouseleave: function() {
// get the difference
timer = Date.now() - timer;
console.log( parseFloat(timer/1000) + " seconds");
timer = null;
}
});
Check Fiddle
How about this quick plugin I just knocked out, which will work on multiple elements, and without using any global variables:
(function($) {
$.fn.hoverTimer = function() {
return this.on({
'mouseenter.timer': function(ev) {
$(this).data('enter', ev.timeStamp);
},
'mouseleave.timer': function(ev) {
var enter = $(this).data('enter');
if (enter) {
console.log(this, ev.timeStamp - enter);
}
}
});
};
})(jQuery);
Actually disabling the functionality is left as an exercise for the reader ;-)
Demo at http://jsfiddle.net/alnitak/r9XkX/
IMHO, anything using a timer for this is a poor implementation. It's perfectly trivial to record the time without needing to use an (inaccurate) timer event to "count" seconds. Heck, the event object even has the current time in it, as used above.
This is exam:
var begin = 0;
var end = 0;
$('#btn').hover(function () {
begin = new Date().getTime();
});
$('#btn').leave(function () {
end = new Date().getTime();
sec = (end - begin) / 1000;
alert(sec);
});
One way to go about it would be the event.timeStamp method :
var initial_hover, exit_hover;
$('#ele').hover(
function(event){
initial_hover = event.timeStamp
console.log(initial_hover);
},
function(event){
exit_hover = event.timeStamp
$(this).html(exit_hover - initial_hover);
console.log(exit_hover);
}
);
jsfiddle
You've tagged the question with JQuery, so here's a jQuery solution.
$(element).on('mouseover', function(e){
$(e.target).data('hover-start', new Date().getTime());
});
$(element).on('mouseout', function(e){
// count the difference
var difference = new Date().getTime() - $(e.target).data('hover-start');
// clean up the data
$(e.target).data('hover-start', undefined);
console.log('Mouse was over for', difference/1000, 'seconds');
});
use setInterval and store value in variable. call the function on mouserover.
function mouseover(){
var start = 0;
setInterval(function(){
start++;
var count = start;
}, 1000);
}
I'm on a quiz, where you can pick an answer out of four answer possibilities (like who wants to be a millionaire). I want to add a counter of 7secs per question to it, if the counter ends, a button to the next question should appear.
I already have my basic code with jQuiz, but my problem is now, that I use always the same counter instance. So the timer of the first question is fine, but if you answer the next question and have some time left of the first one, both counters are displayed at the same time. I think my problem will be solved when I have multiple timer instances, but I don't know how to do this.
Here my code. Sorry about the bad structure, I'm a jQuery newbie.
$('.btn, .nxt').click(function(){
$(this).addClass("checked");
next(this);
var el = $('#progress');
el.width(el.width() + 116 + 'px');
});
function next(elem){
$(elem).parents('.questionContainer').fadeOut(300, function(){
var interval = window.setInterval(function() {
var counter = 0;
clearInterval(interval);
});
var counter = 0;
timer();
$(elem).parents('.questionContainer').next().fadeIn(300);
$('.nxt').hide();
});
};
function timer(){
var counter = 7;
var interval = window.setInterval(function() {
counter--;
$(".counter").html(counter);
if (counter == 0) {
$(".counter").html('');
$('.nxt').show();
clearInterval(interval);
}
}, 1000);
};
I'm new at Stackoverflow and it's too hard for me to edit code in this textarea... Added fixed JS to jsfiddle.
Try to add your HTML to the same fiddle and test JS, hope it would work.
There are some fixes about structure (caching selections mostly) and added array for timers (with comments) you were asking for.
It'll be easier to debug when you add HTML :)
var quizObj = {
quizTimers: [], //timers array
$counter: $(".counter"),
$buttons: $('.btn, .nxt'),
$progress: $('#progress'),
next: function(elem){
$(elem).parents('.questionContainer').fadeOut(300, function(){
//clears the FIRST timer id in the timers array and removes it from array
clearInterval(quizObj.quizTimers.shift());
quizObj.timer();
$(elem).parents('.questionContainer').next().fadeIn(300);
$('.nxt').hide();
});
},
timer: function() {
var counter = 7;
var interval = window.setInterval(function() {
counter--;
$(".counter").html(counter);
if (counter == 0) {
$(".counter").html('');
$('.nxt').show();
clearInterval(interval);
}
}, 1000);
quizObj.quizTimers.push(interval);
}
}
quizObj.$buttons.click(function(){
$(this).addClass("checked");
quizObj.next(this);
quizObj.$progress.width(quizObj.$progress.width() + 116 + 'px');
});
I am currently busy with making a new website.
I would like to make a counter on my website that shows visitors how many websites I made.
I am currently using Javascript and jQuery to do this. The only problem is that while using the for loop, the result shows very fast and I would like it to count up slowly. This is the code I have so far:
$(document).ready(function() {
var websites = 10;
for (var i=0;i<websites;i++)
{
$('.webcounter').html(i);
}
});
Any one has an idea to making the counter go slow?
You can try this:
var interval = window.setInterval(func, delay[, param1, param2, ...]);
This timer works in seconds, you can put the code to run after it's complete in the else section:
Javascript
function countdown(count){
$('.webcounter').html(count);
count -= 1;
if(count >= 0)
setTimeout("countdown("+count+")", 1000);
else
alert("Countdown Complete");
}
$(document).ready(function() {
countdown(10);
}
HTML
<div class="webcounter">Webcounter Holder</div>
Demo
http://jsfiddle.net/silver89/SBXAQ/8/
Use setInterval:
EXAMPLE
HTML
<div class="websites">0</div>
JQUERY
$(document).ready(function() {
var websites = 10;
var counter = 1;
var id = setInterval(function(){
$('.websites').text(counter);
counter++;
if(counter > websites){ clearInterval(id);}
}, 500);
});
Just a quick guess, but try something like this (i'm at work and cant test myself, heheh)
var websites = 10, tmrSiteCount;
function siteCount(i) {
if (i <= websites) {
$('.webcounter').html(i);
tmrSiteCount = setTimeout(function() { siteCount(i++); }, 1000);
}
else {
clearTimeout(tmrSiteCount);
};
}
$(document).ready(function() {
tmrSiteCount = setTimeout(function() { siteCount(1); });
})
This may not be the place for this question, but here goes anyways.
I am trying to learn more about the JS timers and am using the JS Fiddle for this purpose. In my script, I am using a script that binds functionality to a few elements, but I need the JS Fiddle to not execute it until the page loads completely due to it needing all elements to be initialized and available (see my fiddle at: http://jsfiddle.net/radi8/W2b2M/4/). This fiddle is a VERY rough skeleton.
The format of the script is as follows:
How can I make the JS Fiddle only load this after all other elements are finished?
$(document).ready(function() {
var tmr = {
init: function(){
},
somefunct1: function(){
},
somefunction2: function(){
}
};tmr.init();
});
Any help is appreciated.
document.ready() is the way to good. However, there are other issues with your code. This function is not defined correctly:
function stopTimer {
clearInterval(timer);
}
Should be:
function stopTimer() {
clearInterval(timer);
}
Also, startstop.value is not defined. What is startstop suppose to be?
Update
Your use of .val() is incorrect, and many other issues (fixed):
http://jsfiddle.net/W2b2M/17/
Check this Fiddle:
A simple Javascript Function to Set timer.
$(document).ready(function () {
var input = 120;
function calculateTime(timer) {
var timer = timer;
var mins = Math.floor(timer / 60);
var secs = timer % 60;
var time = (mins < 10 ? "0" : "") + mins + ":" + (secs < 10 ? "0" : "") + secs;
return time;
};
setInterval(function () {
data = calculateTime(input)
if (input > 0)
{
$("#timer").text(data);
input--;
}
else
{
$("#timer").text("Time Out, Njoy Coding in JavaScript")
}
}, 1000);
});
http://jsfiddle.net/MUMU1987/sUkjj/