Develop Reference

Javascript setTimeout call multiple time

I have a one page horizontal sliding site. each slider has a question and a timer. when user slides to next, it should reset the timer and start from beginning. here is my jquery code:
$(document).ready(function(){
var mytimer;
$('#main').on('click', '.slidinglink', function(e){
e.preventDefault();
var section = $(this).attr('href');
var slide = $(this).data('slide');
var left = '';
if(section != '#'){
$('.timer').show();
left = '-100%';
var $active_question = $('.answer-list.active');
//mytimer = null;
clearTimeout( mytimer );
mytimer = setTimeout(function () {
finish_question( $('.answer-list > li.checked') );
}, 5000);
do_sliding(left, section, slideback);
}
});
});
The timer works for the first time. but if i go to next section, the timer does not work. What seems to be the problem? I have 2 other setTimeout functions which are also called during slide. They are like this (both similar):
setTimeout(function(){
item.removeClass('clone');
}, 20);

Allowing for maximum number of opened accordion sections using jQuery

I've looked all over the internet and I can't seem to find a good way to do this.
I've got an accordion menu that I've built primarily using addClass/removeClass and css. It has special functionality, the accordion tabs open after a delay on mouseover and they open and close on click. I can currently open all of them at once, but I'd like to limit this to 2 or 3 with the earliest selected panel closing after I hit that limit. So I'd either need to make the classes numbered and switch them on every action, or perhaps apply a variable that keeps track of the order in which the panels were selected and switch them.
Below is the code I have so far. I've only been able to get as far as keeping count of how many tabs there currently are open. Does anyone have an idea as to what the best way to approach this is?
var timer;
var counter = 0;
$('li.has-dropdown').mouseenter(function() {
dd_item = $(this);
if(!$(this).hasClass('expand-tab')){
timer = setTimeout ( function () {
$(dd_item).addClass('expand-tab');
counter++;
}, 200);
};
}).mouseleave(function(){
clearTimeout(timer);
console.log(counter);
}).click(function() {
if ($(this).hasClass('expand-tab')){
$(this).removeClass('expand-tab');
counter--;
console.log(counter);
}else{
$(this).addClass('expand-tab');
console.log(counter);
}
});

Add a incrementting data-index to each opened tab.
count the tabs on the end of the hover effect, if they are to many, sort them by the index, and hide the lowest/oldest.
var timer;
var index = 1;
$('li.has-dropdown').mouseenter(function() {
dd_item = $(this);
if(!$(this).hasClass('expand-tab')){
timer = setTimeout ( function () {
$(dd_item).addClass('expand-tab');
$(dd_item).attr('data-index', index++);
counter++;
}, 200);
};
}).mouseleave(function(){
clearTimeout(timer);
console.log(counter);
}).click(function() {
$(this).taggleClass('expand-tab'); // see jQuery toggleClass();
$(this).attr('data-index', index++);//this will add index on closed tabs also.. but it does not matter at the end.
});
if($('.expand-tab').length> 3){
//custom inline sorting function.
var expanded_tabs = $('.expand-tab').sort(function (a, b) {
return (parseInt( $(a).attr('data-index')) < parseInt( $(b).attr('data-index')) ? -1 : 1 ;
});
//time out .. effect etc.
expanded_tabs[0].removeClass('expand-tab');
}
P.S I don't like havving Hover and Click in the same place ... try to separate the events and call a unified collapseIfToMany function in on each event

This is a corrected version. I decided to use a variable for the maximum panels opened, this way you don't have to dig if you decide you want to change it, or if you add more to the code.
var timer;
var index = 1;
var maxOpen = 2;
$('li.has-dropdown').mouseenter(function() {
dd_item = $(this);
if(!$(this).hasClass('expand-tab')){
timer = setTimeout ( function () {
$(dd_item).addClass('expand-tab');
$(dd_item).attr('data-index', index++);
collapseIfTooMany();
}, 200);
};
}).mouseleave(function(){
clearTimeout(timer);
}).click(function() {
$(this).toggleClass('expand-tab'); // see jQuery toggleClass();
$(this).attr('data-index', index++);//this will add index on closed tabs also.. but it does not matter at the end.
});
function collapseIfTooMany(){
if($('.expand-tab').length > maxOpen){
//custom inline sorting function.
var expanded_tabs = $('.expand-tab').sort(function (a, b) {
return (parseInt( $(a).attr('data-index')) < parseInt( $(b).attr('data-index'))) ? -1 : 1 ;
});
//time out .. effect etc.
$(expanded_tabs[0]).removeClass('expand-tab');
}
};

Stop a jquery loop function on click while adding class

I have a function that continuously loops through a set of divs (see below) with the class active. I'm trying to modify the function so that when you click on the div it stops the loop and adds the class active to that div.
I've looked through countless examples on StackOverflow, but haven't been able to find something that works for my situation.
Function I'm trying to modify:
function doLoop() {
$('.cd-types, .img-frame, .img-content-container').each(function(){
(function($set){
setInterval(function(){
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
},7000);
})($(this));
});
}
Here is the jfiddle with my attempt on modifying the loop. I know its fairly simple and I've spent the last few hours trying to figure it out. Any advice/direction would be greatly appreciated.

Try
function doLoop() {
$('.cd-types, .img-frame, .img-content-container, .list-items').each(function () {
var $set = $(this);
var interval = setInterval(function () {
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
}, 1000);
$set.data('loop', interval);
$set.on('click', '> *', function () {
$(this).addClass('active').siblings('.active').removeClass('active');
clearInterval($set.data('loop'));
$set.removeData('loop')
});
});
}
Demo: Fiddle, Fiddle2

Simplified the loop function a bit to use the "self" variable trick.
timerID was used to track the setInterval() call so that it could be stopped using clearInterval() call when clicked:
$('.list-items').children().first().addClass('active');
var timerID;
$('.list-items').each(function () {
var self = this;
timerID = setInterval(function () {
var $cur = $(self).find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $(self).children().eq(0);
$next.addClass('active');
}, 1000);
});
$('.list-items').on('click', function(){
clearInterval(timerID);
alert("Stopped");
});
See the working code at:
JSFiddle

Can't get javascript text effect to work properly with delay

I'm trying to make a random text effect kinda like the one at the end of the movie War Games (Matthew Broderick). The idea is to have individual letters change randomly when ever the user hovers over one of the letters in the word. Eventually after a short time the letter would end up being "decoded" meaning that it would end up on the right letter or number. I have built basic effect but the part I am struggling with is setting the timer. I want to create a small delay between the hover-out event and the actual display of the decoded character. When i add a settimeout however. The script breaks and seems to stack timers. I'm not sure what I'm doing wrong. Below is the code I've got so far.. any help would be great.
function setDecodedChar(object){
var decodedMessage = "HELLO WORLD";
var index = object.attr('class').substring(4);
console.log(index);
object.html(decodedMessage[index]);
}
function changeChar(object){
var randomchar = getrandomChar();
object.html(randomchar);
}
function getrandomChar(){
var char = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
char = possible.charAt(Math.floor(Math.random() * possible.length));
return char;
}
$(function() {
typesetting.letters('.title-text');
var target = $(".title-text").children();
console.log(target);
var timer;
var gate = true;
$(target).hover(function(){
var charChar = $(this);
//on hover-over
if(gate){
gate = false;
timer=setInterval(function(){
changeChar(charChar);
},100);
}
},function(){
//on hover-out
setTimeout(function(){ //<-- breaks here
clearInterval(timer)
setDecodedChar($(this));
},1000);
gate = true;
}
);
});
Here is a jsfiddle of the effect as I currently have it working. http://jsfiddle.net/thesnooker/htsS3/

I really like your idea, and I worked on it. I got it working.
First, here a fiddle : http://jsfiddle.net/htsS3/2/
I must say, i don't know if its the optimal way, but it still working!
The problem with you method is that you have 1 timer for every character, they override themselves, so some letters wont stop.
How i solve it:
I set the timer in the data of every letter like that :
$(this).data('timer', setInterval(function () {
changeChar(charChar);
}, 100));
Not every span have their own timer.
On hover out, i ad to save the $(this) reference into a `var since you lost it in the timeout. I alos saved the timeout into the data so i could stop it when you hover it and it's still changing. Well it look like that now :
var $this = $(this);
$this.data('timeout', setTimeout(function(){
clearInterval($this.data('timer'));
setDecodedChar($this);
},1000))
And finally, on hover, i had to clear timeout and interval:
clearInterval($(this).data('timer'));
clearTimeout($(this).data('timeout'));
Well, I find it hard to explain in my own word, so take a good look at the code and enjoy!

setsetTimeout(function(){ //<-- breaks here
clearInterval(timer)
setDecodedChar($(this));
},1000);
You have an extra 'set'
setTimeout(function(){ //<-- breaks here
clearInterval(timer)
setDecodedChar($(this));
},1000);

So the issue could be related to the timer. It changes every time the setInterval is called. If you were to store the interval on the hover object then clear it by using the stored reference it works.
Cool concept by the way.
$(function () {
var target = $(".text").children();
var timer;
$(target).hover(function () {
var charChar = $(this);
if($(this).data("timer") == void(0)) {
if($(this).data("timeout") != void(0)) {
clearTimeout($(this).data("timeout"));
}
$(this).data("timer", setInterval(function () {
changeChar(charChar);
}, 100));
}
}, function () {
//on hover-out
var timerObject = $(this);
timerObject.data("timeout", setTimeout(function() {
clearInterval(timerObject.data("timer"));
setDecodedChar(timerObject);
timerObject.removeData("timer");
}, 1000));
});

jquery/javascript set multiple timeouts one after the other via loop to run independently of the other

I am trying to animate a handful of DIV's to scroll upwards but I want one to scroll up after a pause after the other after the other. And the best I can come up with at the moment is
$('.curtain').each(function()
{
var $elem = $(this);
setTimeout(function()
{
$elem.animate({"height":0+'px'}, 2000);
}, 1000);
});
Problem is they still all animate together without pause. How can I go about doing something in this fashion. The divs are dynamically generated and there can be 5 - 20 of them so doing a hardcoded logic is out, any ideas?

function animateIt () {
var elems = $('.curtain').get();
(function next() {
if(elems.length){
var elem = $(elems.shift());
elem.animate({"height":0+'px'}, 2000, next);
}
})();
}
animateIt();
running example
Another way like queue
function animateIt () {
var divs = $('.curtain');
divs.each( function(){
var elem = $(this);
$.queue(divs[0],"fun", function(next) { elem.animate({"height":0+'px'}, 2000, next); });
});
divs.eq(0).dequeue("fun");
}

Looks like a simple recursive function might work for you here -
function doAnimation(elapsed){
var iterations = $('.curtain').length;
var current = elapsed+1;
if (current <= iterations){
setTimeout(function(){
$('.curtain:eq(' + elapsed + ')').animate(...);
doAnimation(current);
},50);
}
}
doAnimation(0);
Here's a simple demo