I am using setTimeout to run a slideshow. I want to have button to stop it. The markup is:
<h3> Modest Mouse at Fillmore in Miami <h3>
<div>
<img id="photo" src="http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg" alt= "Modest Mouse at Fillmore">
<span>•</span>
<span>•</span>
<span>•</span>
</div>
<button onclick="stopShow();">Stop</button>
The JS is:
var aSlideShowPics = ["http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg",
"http://the305.com/blog/wp-content/uploads/2014/05/modestmoude7.jpg",
"http://the305.com/blog/wp-content/uploads/2014/05/modestmouse8.jpg"
];
// Timer for SlideShow
var i = 0;
function changeSlide() {
var stopShowID;
stopShowID = window.setTimeout(function() {
newPic = aSlideShowPics[i];
$("#photo").attr("src", newPic);
i++;
if (i < aSlideShowPics.length) {
changeSlide(); // recursive call to increment i and change picture in DOM.
} else {
i = 0; // reset loop to keep slideshow going
changeSlide(); // Recursive call on loop end
}
function stopShow() {
window.clearTimeout(stopShowID);
}
}, 3000)
}
changeSlide();
I keep getting a reference error on button click of no stopShow. I've tried putting the clearTimeout function in several places in code but get same error. Perhaps a new set of eyes can see my error. Here is the jsfiddle. Thanks for any input.
Move the stopShow outside of the timeout and outside of changeSlide.
var stopShowID;
function changeSlide() {
stopShowID = window.setTimeout( function(){}, 3000);
}
function stopShow() {
if(stopShowID) {
window.clearTimeout(stopShowID);
stopShowID = null;
}
}
the stopShow() method does not exists at the window level, it only exists within the body of changeSlide(). Directly attach it to window
window.stopShow = function() ...
or pull it out of the closure
var i = 0;
var stopShowId;
function stopShow() {
window.clearTimeout(stopShowID);
}
function changeSlide() {
stopShowID = window.setTimeout(function() {
if (i >= aSlidesShowPics.length - 1)
i = 0;
var newPic = aSlideShowPics[i++];
$("#photo").attr("src", newPic);
changeSlide();
}, 3000);
}
I couldn't launch your jsfidle example, so I update the content of your code, 2 issues raised:
1- Your stopShow was undefined, so I attached it to window scope:
window.stopShow = stopShow;
2- For your ClearTimeout scope issue: your stopShowID variable was inside your function changeSlide: your stopShow was using a local copy. I basically put it as a global variable so both function could have access to it.
var aSlideShowPics = ["http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg",
"http://the305.com/blog/wp-content/uploads/2014/05/modestmoude7.jpg",
"http://the305.com/blog/wp-content/uploads/2014/05/modestmouse8.jpg"
];
// Timer for SlideShow
var stopShowID;
var i = 0;
function stopShow() {
window.clearTimeout(stopShowID);
}
window.stopShow = stopShow;
function changeSlide() {
stopShowID = window.setTimeout(function() {
newPic = aSlideShowPics[i];
$("#photo").attr("src", newPic);
i++;
if (i < aSlideShowPics.length) {
changeSlide(); // recursive call to increment i and change picture in DOM.
} else {
i = 0; // reset loop to keep slideshow going
changeSlide(); // Recursive call on loop end
}
}, 3000)
}
changeSlide();
working jsfiddle:
http://jsfiddle.net/fLw2a4vs/44/
Related
I have 31 images and I want to display them one after another as the background of a div. I only want it to change when the user hovers over the div. My problem right now is that it just flips through all the images really fast. I am attempting to use setTimeout, but it isn't working. How can I make the delay work?
The name of the div is About_Me_Block and the images are called frame1.gif,frame2.gif ...etc
Here is my code:
function changeImg(counter) {
$('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
}
$(document).ready(function() {
var hoverAnimate = []
"use strict";
$('#About_Me_Block').mouseenter(function() {
hoverAnimate[0] = true;
var counter = 0;
while (hoverAnimate[0]) {
console.log(counter);
setTimeout(changeImg(counter), 1000);
counter++;
if (counter === 32)
hoverAnimate[0] = false;
}
});
$('#About_Me_Block').mouseleave(function() {
hoverAnimate[0] = false;
$(this).attr("style", "background-image: url(play.jpeg);");
});
});
setTimeout doesn't wait for the function to end, it works lile threading in other languages.
To achieve a what you want, you need to call setTimeout from the changeImg function.
var counter = 0;
$(document).ready(function() {
var hoverAnimate = []
"use strict";
$('#About_Me_Block').mouseenter(function() {
hoverAnimate[0] = true;
counter = 0;
changeImg();
});
$('#About_Me_Block').mouseleave(function() {
hoverAnimate[0] = false;
$(this).attr("style", "background-image: url(play.jpeg);");
});
});
function changeImg() {
$('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
counter++;
if (counter < 32 && hoverAnimate[0]) {
setTimeout(changeImg, 1000);
} else {
hoverAnimate[0] = false;
}
}
the reason they happen all at once is because while statement doesn't have delay, so all setTimeout will be set up at the same time, thus, calling changeImg all at once.
To solve this problem, you can replace setTimeout with setInterval. Instead of using while, you can just call setInterval like
var counter = 0;
var myTimer = setInterval(changeImg, 1000);
and update counter inside changeImg every time it gets called. After looping, don't forget to
clearInterval(myTimer)
It seems you need to read up on how setTimeout works. It essentially places a reminder to run a function after a given amount of milliseconds have passed. So, when you do setTimeout(changImg(counter), 1000) you are calling changImg(counter) which returns undefined. Therein producing this setTimeout(undefined, 1000) which is why it flips really fast.
So, you can use bind to allow the function to be called later with that parameter built in. Also, make sure you remove the reminders once done with clearTimeout.
function changeImg(counter) {
$('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
}
$(document).ready(function() {
var hoverAnimate = false, id;
function loop(counter) {
if(hoverAnimate || counter < 32) {
changeImg(counter);
id = setTimeout(loop.bind(this, counter++), 1000);
}
}
$('#About_Me_Block').mouseenter(function() {
hoverAnimate = true;
id = setTimeout(loop.bind(this, 0), 1000);
});
$('#About_Me_Block').mouseleave(function() {
hoverAnimate = false;
// Don't want a reminder for a random counter to wake up.
clearTimeout(id);
$(this).attr("style", "background-image: url(play.jpeg);");
});
});
Two methods for timers - setTimeout and SetInterval (single / repeating)
// setInterval is also in milliseconds
var intervalHandle = setInterval(<yourFuncToChangeImage>,5000);
//this handle loop and make example loop stop
yourelement.yourEvent = function() {
clearInterval(intervalHandle);
};
I am currently setting up two buttons, start and stop for a jquery loop on html5. The start button works perfectly but whatever I try the 'stop' button remains inactive. I have seen many examples about stopping the loop but none seems to resolve the issue in the button being unresponsive. Sorry if this is such a simple question, but as a student I am quite frustrated and thus asking. cheers
"use strict";
var current_banner_num = 1;
$(document).ready(function(){
$("#banner-base").css("visibility","hidden");
$("#banner-"+current_banner_num).show();
var next_button = $("#start").button();
var stop_button = $("#stop").button();
next_button.click(function(){
var timer = setInterval(myCode, 2000);
function myCode() {
//$("#banner-"+current_banner_num).hide();
$("#banner-"+current_banner_num).fadeTo(800, 0);
if (current_banner_num == 4) {
current_banner_num = 1;
}
else {
current_banner_num++;
}
$("#banner-"+current_banner_num).fadeTo(800, 1);
}
});
stop_button.click(function(){
function abortTimer(){
clearInterval(timer);
}
});
});
You are just defining a function again and again here. Just get rid of the function in the event handler:
stop_button.click(function(){
clearInterval(timer);
});
This would execute the clearInterval(), while the code in your original question just defines a function, but doesn't call or do anything as you said. Hope it gets solved.
I think you have 2 problems in your code. timer variable is not visible outside of next_button.click(function(){ ... }); because it is local for this function, so you need to make it a little bit global; second problem is that in stop_button.click(function(){ ... }); you just declare function abortTimer but do not call it (in general, it is not necessary to declare that function). I think your code should be like:
"use strict";
var current_banner_num = 1;
$(document).ready(function(){
$("#banner-base").css("visibility","hidden");
$("#banner-"+current_banner_num).show();
var next_button = $("#start").button();
var stop_button = $("#stop").button();
var timer = null;
next_button.click(function(){
timer = setInterval(function(){
//$("#banner-"+current_banner_num).hide();
$("#banner-"+current_banner_num).fadeTo(800, 0);
if (current_banner_num == 4) {
current_banner_num = 1;
}
else {
current_banner_num++;
}
$("#banner-"+current_banner_num).fadeTo(800, 1);
}, 2000);
});
stop_button.click(function(){
clearInterval(timer);
});
});
Also it wasn't necessary to declare function myCode in nextButton function, so i clear it too for you
Use a global variable instead of a local one ,unwrap the clearInterval function
"use strict";
var current_banner_num = 1;
$(document).ready(function(){
$("#banner-base").css("visibility","hidden");
$("#banner-"+current_banner_num).show();
var next_button = $("#start").button();
var stop_button = $("#stop").button();
var timer = null;
next_button.click(function(){
timer = setInterval(myCode, 2000);
function myCode() {
//$("#banner-"+current_banner_num).hide();
$("#banner-"+current_banner_num).fadeTo(800, 0);
if (current_banner_num == 4) {
current_banner_num = 1;
}
else {
current_banner_num++;
}
$("#banner-"+current_banner_num).fadeTo(800, 1);
}
});
stop_button.click(function(){
clearInterval(timer);
});
});
I have trouble with timer in button click. When i click button startpause() method is called there i set start timer and stop timer. It works fine when I click button normally(one click after sometime another click) but when I click the button again and again speedly the timer starts to jump with 2-3 secs. Seems like more than one timer is running.. Anyone have any idea....?? here time is my timer method
function startpause() {
if(FLAG_CLICK) {
setTimeout(tim,1000);
FLAG_CLICK = false;
}
else {
clearTimeout(ti);
FLAG_CLICK = true;
}
}
function tim() {
time.innerHTML = t;
t = t + 1;
ti= setTimeout("tim()", 1000);
}
Try this:
// assuming you declared ti and t out here, cuz I hope they're not global
var t = 0;
var ti;
var running = false;
function startpause() {
clearTimeout(ti);
if(!running) {
ti = setTimeout(tim,1000);
running = true;
} else {
running = false;
}
}
function tim() {
time.innerHTML = t;
t = t + 1;
ti = setTimeout(tim,1000);
}
You can read more about the .setTimeout() here: https://developer.mozilla.org/en/docs/DOM/window.setTimeout
Also, see the jsfiddle I just created: http://jsfiddle.net/4BMhd/
You need to store setTimeout somewhere in order to manipulate it later.
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
ref http://www.w3schools.com/js/js_timing.asp
Maybe you must change this:
if(FLAG_CLICK) {
setTimeout(tim,1000);
FLAG_CLICK = false;
}
to:
if(FLAG_CLICK) {
tim();
FLAG_CLICK = false;
}
It seems works for me normally
In my game I have a startGame() function which initializes all the key functions that start the game. At the beginning, you press the start button to take you to the game. Once the game is complete the restart button appears. When this is clicked it takes you back to the start screen, where the start button is.
Ideally I would like at this point to be able to click the start button for the second time, and a new game appear. The problem is that it brings the old game up. I have tried to use .empty, .queue and .dequeue and reset, but nothing seems to work.
How can I restart all the functions when the restart-button is clicked?
$(document).ready(function () {
successSound = $("#successSound")[0];
failSound = $("#failSound")[0];
moveSound = $("#moveSound")[0];
hitSound = $("#hitSound")[0];
missSound = $("#missSound")[0];
hintSound = $("#hintSound")[0];
hintPic = $("#hintPic")[0];
hintPicTitle = $("#hintPicTitle")[0];
bgMusic = $('#audio-bg')[0];
newGame();
//Click event to start the game
$(".start-btn-wrapper").click(function () {
startplay();
});
//Click event to restart the game
$(".restart-btn").click(function () {
restartplay();
});
Fiddle with script in: http://jsfiddle.net/rVaFs/
It will be much easier if you stop using globals: everything not prefixed with var (including functions).
If your startplay depends on initial DOM state, and it’s too difficult (or just takes too much time) to rewrite the code, you can just make a copy of that part of DOM before starting game and delete it on finish.
You could use the document.ready callback to reset everything back to it's original state, by naming the callback function:
$(document).ready(function reset()
{
//your code here
//note, you must ensure event handlers are unbound:
$('#reset').unbind('click').bind('click',reset);//<-- call main callback
});
Another thing you have to keep in mind is that you're creating a lot of implied globals, which could cause problems if you were to use the ready callback. To address this, do change these lines: successSound = $("#successSound")[0]; to var successSound = $("#successSound")[0];.
I created a function called resetGame() and cleared the DOM:
function resetGame() {
$(document).ready();
$('.table-container').empty();
$('.reveal-wrapper').empty();
$('.helper').removeClass('inactive');
$('.tiles-wrapper').removeClass('active');
$('.hint-container').removeClass('active');
$('td').addClass('highlight-problem');
$('.game').removeClass("active").removeClass('game-over').addClass('standby').addClass('transition');
$('.score').html("");
$(".next-question").removeClass('move-down');
$('.reveal-wrapper').removeClass('image' + randomNumber);
$(bgMusic).unbind();
score.right = 0;
score.wrong = 0;
}
function newGame() {
randomWord = [];
listOfWords = [];
attemptNumber = [];
completionNumber = [];
populationNumber = [];
gridSize = [];
createGrid();
backGroundImage();
dragEvent();
nextQuestion();
closeMessage();
replaySound();
$('.score').html("0/" + completionNumber);
$('.game').removeClass("standby").addClass('active').addClass('transition');
$(bgMusic).on('timeupdate', function () {
var vol = 1,
interval = 250;
if (bgMusic.volume == 1) {
var intervalID = setInterval(function () {
if (vol > 0) {
vol -= 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
}, interval);
}
});
}
$(document).ready(function () {
successSound = $("#successSound")[0];
failSound = $("#failSound")[0];
moveSound = $("#moveSound")[0];
hitSound = $("#hitSound")[0];
missSound = $("#missSound")[0];
hintSound = $("#hintSound")[0];
hintPic = $("#hintPic")[0];
hintPicTitle = $("#hintPicTitle")[0];
bgMusic = $('#audio-bg')[0];
backGroundSound();
playBackGroundSound();
keyPress();
$(".start-btn-wrapper").click(function () {
newGame();
});
$(".restart-btn").click(function () {
resetGame();
});
});
I then called it in the restart-btn click event.
This is a function for a slideshow,onmouseover i want it to stop. Instead of stopping the slideshow onmouseover, it speeds up?? How can i correct this to stop onmouseover?
<body onload="nextslide();">
function nextslide() {
// Hide current slide
var object = document.getElementById('slide' + current); //e.g. slide1
object.style.display = 'none';
// Show next slide, if last, loop back to front
if (current == last) {
current = 1;
} else {
current++;
}
object = document.getElementById('slide' + current);
object.style.display = 'block';
var timeout = setTimeout(nextslide, 2500);
object.onmouseover = function(){
clearTimeout( timeout );
}
object.onmouseout = nextslide;
}
I tried your code and the only problem I can see is on "onmouseout" there is an immediate transition to next slide. I would change that line like this:
object.onmouseout = function() {
timeout = setTimeout(nextslide, 2500);
}
I disagree with Jared, "timeout" is defined there because you are using nested functions and inner functions have access to outer functions scope. You should never omit var when defining variables.