I want to be able to click a an element with an id of pause to start a count of the elements in a time object and if I re click the pause it will stop it and reclick start it exactly like the toggle feature in JQuery but with a setInteval function how would I go about doing this?
$("#pause").click(function(ffe) {
if(on == true) {
on = false
alert("on");
}
else {
on = true;
alert("off");
}
if(on == false) {
setInterval(function() {
$("#timet ul").append("<li>" + $("#time ul")
.children('li').length +"</li>");
}, 100);
}
else {
alert("Error");
}
});
A classic technique is to use a single master setInterval loop and simply use if..else logic to determine what needs to run. This is how a lot of javascript games work:
var on = true;
// Our master scheduler:
setInterval(function() {
if (on) {
$("#timet ul").append("<li>" + $("#time ul")
.children('li').length +"</li>");
}
}, 100);
// Code to handle the pause button
$("#pause").click(function(ffe) {
on = !on;
}
You can use the setTimeout function, if you want to run the function once, setInterval runs continuously, try the following:
var on = false;
$("#pause").click(function(ffe) {
if (on) {
on = false;
setTimeout(function() {
$("#timet ul").append("<li>" + $("#time ul")
.children('li').length +"</li>");
}, 100);
} else {
on = true;
}
});
You need to use .clearInterval() to stop the execution.
Here is the code: (THE WORKING DEMO)
$("#pause").click((function () {
var interId = null;
var $ul = $("#timet ul");
return function (e) {
if (interId) {
$(this).text("start");
clearInterval(interId);
interId = null;
} else {
$(this).text("pause");
interId = setInterval(function () {
$ul.append($('<li>').text($('li', $ul).length));
}, 100);
}
};
}()));
Related
I want to stop a function being fired again for 5 seconds after the last.
This is what I had:
return {
buildUI: function() {
el.nav.on({
mouseenter: function() {
el.logo.addClass('spin');
},
mouseleave: function() {
el.logo.removeClass('spin');
}
});
}
}
On mouseenter, add class to spin the logo. On mouseleave, remove the class. But to stop the logo spinning every mouseenter, I want to add a 5 second ban since the last.
This is what I tried, amongst other attempts:
var flipLogoTimer;
return {
el.nav.on({
mouseenter: function() {
if (!flipLogoTimer) {
el.logo.removeClass('spin').addClass('spin');
}
},
mouseleave: function() {
el.logo.removeClass('spin');
flipLogoTimer = setTimeout(function() {
//
}, 5000);
}
});
}
I tried to add a 5 second timer to the mouseleave event, so the next mouseenter can check if the timer is still running to determine whether or not to run the animation again.
Where am I going wrong and is there a better way? It's a difficult one to search for, as there are so many questions about running a function on a timer.
You can use the flag like
return {
buildUI: function () {
var flag = false;
el.nav.on({
mouseenter: function () {
if (flag) {
return;
}
el.logo.addClass('spin');
},
mouseleave: function () {
if (flag) {
return;
}
flag = true;
el.logo.removeClass('spin');
setTimeout(function () {
flag = false;
}, 5000)
}
});
}
}
You can try something like this by toggling value of flipLogoTimer
var flipLogoTimer=false;
return {
el.nav.on({
mouseenter: function() {
if (!flipLogoTimer) {
el.logo.removeClass('spin').addClass('spin');
}
},
mouseleave: function() {
el.logo.removeClass('spin');
flipLogoTimer=true;
setTimeout(function() {
flipLogoTimer=false;
}, 5000);
}
});
}
You can use timestamp. Idea: you fix last time when you added/removed class, and compare it with current date.
// 5000 - equal to 5 seconds
function checkTimestamp(a, b){
return Math.abs(a - b) < 5000;
}
return {
buildUI: function () {
var lastTimeStamp = null;
el.nav.on({
mouseenter: function () {
if(lastTimeStamp && checkTimestamp(lastTimeStamp, Date.now())
return false;
el.logo.addClass('spin');
lastTimeStamp = Date.now();
},
mouseleave: function () {
if(lastTimeStamp && checkTimestamp(lastTimeStamp, Date.now())
return false;
el.logo.removeClass('spin');
lastTimeStamp = Date.now();
}
});
}
}
After Mouse Leave the ticker starts to move at a very high speed. Don't know what's the error.
Javascript:
$('#tick2').html($('#tick').html());
var temp=0,intervalId=0;
$('#tick li').each(function() {
var offset=$(this).offset();
var offsetLeft=offset.left;
$(this).css({'left':offsetLeft+temp});
temp=$(this).width()+temp+10;
});
$('#tick').css({'width':temp+40, 'margin-left':'20px'});
temp=0;
$('#tick2 li').each(function(){
var offset=$(this).offset();
var offsetLeft=offset.left;
$(this).css({'left':offsetLeft+temp});
temp=$(this).width()+temp+10;
});
$('#tick2').css({'width':temp+40,'margin-left':temp+40});
function abc(a,b) {
$('#outer').mouseenter(function() { window.clearInterval(intervalId);intervalId=0; });
$('#outer').mouseleave(function() { start(); })
var marginLefta=(parseInt($("#"+a).css('marginLeft')));
var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
$("#"+a).css({'margin-left':(marginLefta-1)+'px'});
} else {
$("#"+a).css({'margin-left':temp});
}
if((-marginLeftb<=$("#"+b).width())){
$("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
} else {
$("#"+b).css({'margin-left':temp});
}
}
function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 10) }
start();
You can check the working demo here : http://jsfiddle.net/mstoic/juJK2/
Well, you nearly blew up my browser! Can you try this instead:
function abc(a,b) {
var marginLefta=(parseInt($("#"+a).css('marginLeft')));
var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
$("#"+a).css({'margin-left':(marginLefta-1)+'px'});
} else {
$("#"+a).css({'margin-left':temp});
}
if((-marginLeftb<=$("#"+b).width())){
$("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
} else {
$("#"+b).css({'margin-left':temp});
}
}
function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 10) }
$(function(){
$('#outer').mouseenter(function() { window.clearInterval(intervalId); });
$('#outer').mouseleave(function() { start(); })
start();
});
Working fiddle: http://jsfiddle.net/juJK2/1/
You should only bind your event handlers once, not every time you enter abc();
I want my countdown to stop on the click of a submit button, i searched in some pages,
but I didn't found anything.
Here is the code i want to stop on click
function countDown (count) {
if (count > 0) {
var d = document.getElementById("countDiv");
d.innerHTML = count;
setTimeout (function() { countDown(count-1); }, 1000);
document.getElementById('tiempo').value = count;
}
else
document.location = "timeover.php";
}
document.getElementById("palabra").focus();
countDown(5);
</script>
You have to save reference to timeout (actually return value of timeout will be number) and use it to cancel timeout.
var timeout = window.setTimeout(function () {
// do something
}, 1000);
// clear timeout
window.clearTimeout(timeout);
You probably got the idea. By the way, you should probably look at setInterval method since it would be better in this situation. Interval will "tick" as long until you cancel it.
Try something like this:
var stopped = false;
function countDown (count) {
if (count > 0) {
var d = document.getElementById("countDiv");
d.innerHTML = count;
document.getElementById('tiempo').value = count;
if (!stopped) {
setTimeout (function() { countDown(count-1); }, 1000);
}
}
else
document.location = "timeover.php";
}
document.getElementById("palabra").focus();
document.getElementById("mySubmitId").onclick = function () {
stopped = true;
};
countDown(5);
Actually I have an update enquery into this point .
I have smth like that :
$(document).ready(function() {
setInterval(doSmth, 10000);
function doSmth() {
var result = document.getElementById("fooText").value;
if (result != "") {
doSmthElse(result);
}
});
}
}
});
I need to activate the interval ,that is fired each 10 seconds, in case only a text control has the focus else do nothing !!
Code for you is:
$(document).ready(function() {
setInterval(function(){
var result = $("#fooText").val();
if (result != "") {
// if
} else {
// else
}
}, 10000);
You can set the interval on focus of the field, and clear it on blur:
var interval;
$(field).focus(function() {
interval = setInterval(doMsth, 10000);
});
$(field).blur(function() {
clearInterval(interval);
});
(the interval var has to be global)
You can implement this in 2 ways,
Let the timer run and inside the function check if the activeElement == <text input>, then execute the rest of the function else return.
$(document).ready(function() {
setInterval(doSmth, 5000);
function doSmth() {
var resultEl = document.getElementById("fooText");
if (document.activeElement.id != resultEl.id) { return false; }
if (resultEl.value != "") {
doSmthElse(resultEl.value);
}
}
function doSmthElse(result) { alert(result);}
});
DEMO here
Set the timer on focus of the text box and remove the timer onblur of the input box.
$('#fooText').focus ( function () {
timer = setInterval(function() {
var textVal = $('#fooText').val();
if (textVal != '') {
doSmthElse(textVal );
}
}, 5000);
});
$('#fooText').blur (function () {
if (timer != '') clearInterval(timer);
});
DEMO here
I created this site which uses a simple javascript function to show images based on the user mousing over or clicking numbered boxes on the right. Now after testing it's been determined that an automatic slideshow should be added on top of this, so that next image will show after a few seconds.
http://www.philippedollo.com/photo/fineart/f_amw.htm
Is there a way to amend this code easily to make it happen easily? --
function showPic(whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
Use setInterval().
function getNextPic()
{
// ???
}
setInterval(function ()
{
showPic(getNextPic());
}, 3000); // 3 seconds
There's no need for the if(document.getElementById) check, since the function is 100% cross-browser.
function showPic(whichpic)
{
document.getElementById('placeholder').src = whichpic.href;
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title ?
whichpic.title : whichpic.childNodes[0].nodeValue;
return false;
}
The following should work for you, I tested it and it works fine on my end.
var curPic,
gallery,
pics;
function cyclePic(){
if(curPic < pics.length){
showPic(pics[curPic]);
}
curPic++;
setTimeout(cyclePic,5000);
}
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
window.onload = function(){
curPic = 0,
gallery = document.getElementById("gallery"),
pics = gallery.getElementsByTagName("a");
cyclePic();
}