Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to use recursion in JavaScript to produce an infinite loop. In fact, I desire to give an image a come-and-go effect, endlessly.
Let's take a look at some code first :
function lightening(){
$('#pic_holder').fadeOut(250).fadeIn(250);
setTimeout('lightening', 250);
}
This function, as it's written, should
apply the fadeOut(250) and fadeIn(250) effects ;
engage the setTimeout function which in its turn must call recursively the lightening function, henceforth re-applying the [fadeOut-fadeIn effect and setTimeout] block of code.
This, you'll agree, should go ad infinitum, but it doesn't.
Here's the full test code, with HTML, as you can notice, it applies the fadeOut-fadeIn effect only once.
What am I doing wrong ?
What you really should do is this:
function lightening(){
$('#pic_holder').fadeOut(250).fadeIn(250, lightening);
}
That'll make the next cycle start when the fade-in has completed. Mixing your own timeouts with timeouts implied by jQuery animation calls is tricky and usually unnecessary. In your case, you're starting a new cycle halfway through a previous one, which really won't take effect until 250 milliseconds later.
The first argument to setTimeout can either be:
a function to be called; or
a string of JavaScript to be executed
Your function isn't being called, because you just have its name in a string. Remove the single quotes.
function lightening(){
$('#pic_holder').fadeOut(250).fadeIn(250);
setTimeout(lightening, 250);
}
See the Mozilla Documentation for proper usage.
Instead of using 2 competing timers that will either have intermittent bugs or have to be too generous, use the callback:
function lightening(){
$('#pic_holder').fadeOut(250).fadeIn(250, lightening);
}
Remove quote.
setTimeout(lightening, 250);
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
Does anyone have any idea how to stop an interval that is situated inside of a function once it's done doing its thing?
Here is what I mean:
function renderMessage(message) {
const renderInterval = setInterval(() => {
characterIndex++;
dealerMessage.innerHTML = `
${messages[message].slice(0, characterIndex)}
`;
if (characterIndex === messages[message].length) {
clearInterval(renderInterval)
}
}, 100);
}
As you can see, I'm trying to render out a message using this function. It does its job fine, but if I don't stop it, subsequent messages keep overriding themselves...
I've tested the if check and it is actually functioning inside the function, yet for some reason the clearInterval doesn't work.
Is there any way I can fix this, or do you recommend me to start from scratch?
Note: this method would be very handy for me, so, if possible, I would like to keep it.
I think your 'if' statement of clearInterval should be
if (characterIndex===message[message.length]){}
Also, I cannot see any initialization of the characterIndex variable. Please do inform if this worked or not.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
Just wondering, is there a specific reason to use a while loop as the game loop. Or could I use another method, like this one.
Note: this is not proper code, and has not been tested. This is just a general idea. This example is also not consistent to a specific coding language, but may follow mostly JavaScript because that's the coding language I know off the top of my head. I've actually tried something similar to this in dart (google flutter).
var startTime;
var running = false;
function loop1(){
startTime = system.currentMillis();
loop2();
}
loop2(){
gameUpdate();
//ignore my math, I did not focus on doing that property
//this is just an example and is not proper math
var delay = 1000 / (system.currentMillis() - startTime);
setTimeout(loop3, delay);
}
loop3(){
if(running){
loop1();
}
}
edit: could using something like this to avoid the need to use sleep(); be helpful to performance? (or phone battery)
It is perfectly possible to use your code as a main game loop. The reason why a while is preferred is because a main game loop executes endlessly until aborted, this is done simply with while (true) and aborting somewhere inside with break, or with while (abort == false) and setting abort = true somewhere inside. Notice that other loop variants such as for and do-while are more verbose, unless your language let's you do for (;;). Also note that you can restructure your proposed loop to a more simpler version using a while loop.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm sure this is a very simple solution. I have made this javacript function that tests whether there is a certain css style on a div and then moves around another div. However, it does not work and I have no idea why.
JavaScript:
function sale() {
var style = document.getElementsByClassName("product-single__price--wrapper").getAttribute("style");
if (style !="display: none;") {
document.getElementByClassName("product-single__description").style.marginTop = "70px !important";
}
}
window.onload = sale;
I wouldn't ever suggest doing this, but if you want to call that function all the time, you need to put it into a setInterval with the milliseconds you want it to get called.
Example:
$(document).ready(function() {
setInterval(function() {
sale();
}, 1000);
});
OR
$(document).ready(function() {
setInterval(sale, 1000);
});
This will get called every second. Again, horrible horrible horrible practice. But, this will do what you want. If you want it called sooner, then change the milliseconds accordingly (1000 milliseconds = 1 second).
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have the following js function.
function showAttentionItem(sender)
{
debugger;
var assistanceRequired = sender.parent().hasClass("assistanceRequired");
if (assistanceRequired)
{
sender.children('.assistanceRequiredText').fadeToggle(0);
if (sender.children('.assistanceRequiredText').is(":visible"))
{
sender.children('.studentPerformanceText').hide();
}
}
if (!assistanceRequired)
{
if (sender.parent().hasClass("studentOutsideTargetRange"))
{
sender.children('.studentPerformanceText').fadeToggle(0);
}
}
}
What happens when I run it is, I hit the debugger line, and step through the code. assistanceRequired is true.
After executing sender.children('.studentPerformanceText').hide();, the next line it jumps to is sender.children('.studentPerformanceText').fadeToggle(0);, inside the if (!assistanceRequired) statement!
How could this possibly be happening?
This is guaranteed to work:
if (sender.parent().hasClass("assistanceRequired"))
{
// do whatever here
}
else
{
// do whatever ELSE here
}
Only one or the other can ever run when coded correctly since there is only one test and it will either be true or false the single time it is tested. There is no possibility for it to be changed by some side effect you are not aware of, which is most likely what is happening. This is not debatable.
If this does not work the way you want then something else is wrong that you are not showing and without an executable jsFiddle good luck convincing anyone that a fundamental thing like the if ... else construct is broken.
I can think of only one scenario to explain what you are seeing.
There's a double trigggering of showAttentionItem(), which, in the debugger, is perceived as a single call. On the first call, assistanceRequired is true and on the second it's false.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have an append statement that adds a single character at a time to a span. (The characters are pulled from a string by treating it like an array: text[i] and such.) I feel like it should be giving me this:
<span id="outputid0">text</span>
But instead it's giving me this:
<span id="outputid0">
"t"
"e"
"x"
"t"
</span>
I guess it makes sense, and this is not a real problem at the moment, but it is a bit awkward-looking and I'm not sure why it's happening. Can anyone explain this one for me?
Edit: Here's a link to JSFiddle, showing an example of what I was talking about. Thank you to ᾠῗᵲᄐᶌ, who seems to have diagnosed and solved the problem just fine without that. If anyone else would like to see it, there it is.
Append adds a child node after the last child node so each character is going to be a text node and that is why they are separated like that
If you want to add a character at a time you're better off taking whats there and concatenating the char to the string that's already there
You can do it like this using jQuery's .text(function(){}) function
// where i = index and v = current text value
$('#outputid0').text(function(i,v){
return v + "your new char";
});
FIDDLE EXAMPLE
If I was a betting man, I'd say you are looping thru an array to generate what you want. Do something like this: Remember, I am only assuming how the data is setup - and only showing for example purposes.
var arr = ['t','e','x','t'];
// just '.join' the array
<span id="outputid0"></span>
// following in script tag
jQuery('#outputid0').text(arr.join(''));
Just to reiterate what Ehsan mentions above. You really need to include your code so there is no 'assuming' or 'guessing' at what you want to accomplish :-)