I'm struggling to find out why the setTimeout function cannot find my radio button tagging function when trying to run.
this is my code...
var radioButtonTagging = (function(){
console.log('run');
$("span.radio").each(function(i, ele){
$(ele).addClass('radio'+i);
});
$(".radio1").click(function(){
console.log('fired');
$('#expandQuestion1').css('display','block');
});
});
if($('span.radio').length){
console.log('run');
radioButtonTagging();
} else {
console.log('trying to run timer');
setTimeout("radioButtonTagging()",2000);
}
http://pastebin.com/nvacxZGS
I'm basically just looking for spans with a class radio and adding a further class with radio plus the index.
The reason why I'm using the setInterval is because when it tries to fire the first time the span's are not in place as they are being inserted via jquery.. so are not finished during doc.ready..
Any help would be great
You are passing a string to setInterval, so it is evaled in a different scope. Since the function you are looking for is scoped locally, it can't find it.
Don't pass strings to setInterval, pass functions.
try this
setTimeout(function(){ radioButtonTagging() },2000);
Try:
setTimeout(radioButtonTagging, 2000);
See here:
http://jsfiddle.net/qUAZf/
Related
I want a function that will stop another function from running. It can be in JavaScript or jQuery.
It is for a game so div 1 is clicked over and over.
var makeBox=//a function;
$("#div1").click(function () {
makeBox
});
$("#div2").click(function () {
//stop make box
});
I hope it's more clear now
Why don't you try reassigning the event handler function?
var makeBox=//a function;
$("#div1").click(function () {
makeBox
});
$("#div2").click(function () {
$("#div1").click(function(){
//Do nothing
});
});
You might need to reassign it again later if you want it to work again but I don''t know exactly what you are trying to do.
No. JavaScript is single threaded. The click event won't be processed while another function is running.
(Your function might call other functions, using events, timeouts, etc which would allow for interruption, but there isn't any indication of that in your question).
I use setInterval and clearInterval in js, when 1st page load
var timer_detail=setInterval(function page1_load(){
......
},5000);
When I go to 2nd page
function page2_load(){
clearInterval(timer_detail);
}
but timer don't stop and I don't know why?
Make the interval variable global replacing:
var timer_detail = ...
with
window.timer_detail = ...
This should fix any scope issues but if it doesn't then add an alert to the page2_load function to ensure the function is being executed when expected.
function page2_load(){
alert('page2_load');
clearInterval(timer_detail);
}
One the second page add
<body onload="page2_load()">
this will executed your function.
please not that I also got ride of the "+" in the function name. because you cant have symbols in a function name.
it should be
function page2_load(){clearInterval(timer_detail)}
I have an html page that links to a js file that has the following function:
function show360Simple( divContainerId, imageUrl )
The function gets called on an on-click:
<area onclick="show360Simple('pContainer5','images/porch1.jpg');">
And I want to know how to end the function with another on-click:
<div id="close-div" onclick="what is the syntax here to end the above function?"></div>
Its probably simple but I'm a novice and haven't been able to work it out yet - any help is greatly appreciated - cheers.
The script linked above is using setTimeout to manage the animation.
To stop, you will need to modify the code a bit and add a stop function.
The simplest approach would be to store off the timeoutId returned from each setTimeout call. Then, in the stop function, call clearTimeout passing in the stored timeoutId.
Without making too many changes:
// Declare a global timeoutId
var timeoutId;
In function show360 change the setTimeout call to:
timeoutId = setTimeout(…);
In function move360 change the setTimeout call to:
timeoutId = setTimeout(…);
Then add a stop360 function:
function stop360() {
clearTimeout(timeoutId);
}
Demo fiddle
This will stop the animation - basically freezing it. If you want to remove the changes made by the script you could change the stop function to something like this:
function stop360(divContainerId) {
clearTimeout(timeoutId);
if(divContainerId) {
var o = document.getElementById(divContainerId);
o.style.backgroundImage = '';
o.style.position = "";
o.innerHTML = "";
}
}
Demo with Clear
I'm writing this jquery code :
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){$('#suc').hide('slow')},2500);
$('#suc').remove();
When i remove $('#suc').remove(); like this :
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){$('#suc').hide('slow')},2500);
The code run succefuly, but when i put it, it dosen't run !!
What the problem with that ?
it's illegal to but $('#suc').remove(); here ?
The setTimeout call doesn't wait for the callback to run before the code continues, so you will be removing the element immediately. When the code in the callback tries to hide the element, it's not there.
Remove the element in the complete callback of the hide method:
setTimeout(function(){
$('#suc').hide('slow', function(){
$('#suc').remove();
});
},2500);
As you're using hide you're also safe to use delay, so:
$('#suc').show(700).delay(2500).hide('slow', function () {
$(this).remove();
});
will suffice.
demo: http://jsbin.com/isediz/2/
Also, as a bit of clarification, regarding:
The code run succefuly, but when i put it, it dosen't run !!
Actually the code runs (in a sense), the problem is that your remove will not wait for the two asynchrones events (setTimeout and .hide('slow')). So it will get executed way before those two are done doing what they should do.
You need to put the remove() inside of the setTimeout and in the callback for the hide() function:
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function() {
$('#suc').hide('slow', function() { $(this).remove(); })
}, 2500);
You are using the element setTimout callback which you have already removed with the statement just after setTimout. The call back of setTimeout will execute after the statement removing element with id #suc by the next statement of setTimeout. Remove #suc in hide callback so that it is not accessed by script after removal.
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){
$('#suc').hide('slow',
function(){$(this).remove();
});
},2500);
i got a problem with setTimeout.. i dont know why this will not work..
$(document).ready(function(){
var counterNum = 0;
function tick()
{
addText(counterNum);
setTimeout('tick()',1000);
counterNum++;
}
function addText(strNum)
{
$("div.counter").empty();
$("div.counter").append(strNum);
}
});
you can check it here for the live preview LINK
and also sir, what is the difference between
setTimeout('tick()',1000);
and
setTimeout(tick(),1000);
?
Try:
$(document).ready(function(){
var counterNum = 0;
function tick()
{
addText(counterNum);
setTimeout(tick,1000);
counterNum++;
}
function addText(strNum)
{
$("div.counter").empty();
$("div.counter").append(strNum+"");
}
tick();
});
The difference between
setTimeout('tick()',1000)
and
setTimeout(tick(), 1000)
is that the second one will not wait 1000ms to execute, but if you changed it to
setTimeout(tick, 1000)
it would be effectively the same. Technically, it would change the scope of where the function was called from.
In the case of passing in a string JavaScript has to evaluate it to run your code. With setTimeOut you should always use a pattern like this:
var self = this;
setTimeout(function(){tick();},1000);
This gives you closure and allows you to get around the fact that using setTimeOut changes what this is to be the global object window (a nastly little surprise for developers the first time they encounter it).
Try that in combination with Fredrik recommendeds and you should be in good shape.