We Keep Coding

How to disable function when another function is called?

I wish to disable the opacity fade out function when stop win function is running. I'm using Typescript. How can I do that? Your kindness help is appreciated.
Method that I tried:
Add if statement that include setTimeout function, but it show stopBigWinAnimation type is void
Add if statement that include setTimeout function, declare Boolean type for stopBigWinAnimation and add a return, however Uncaught RangeError: Maximum call stack size exceeded
// Stop Win function
public stopBigWinAnimations() {
this.mainContainer.opacity = 255
let animBigWin4 = this.nodes4.getComponent(sp.Skeleton);
// Maybe it is not animated or it is the 0th empty node
if (animBigWin4) {
animBigWin4.clearTracks();
animBigWin4.setToSetupPose();
if (animBigWin4.defaultAnimation) {
animBigWin4.setAnimation(0, animBigWin4.defaultAnimation, true);
}
}
}
// Fade Out function
setTimeout(function () {
this.nodes5.opacity = 0;
this.nodes6.opacity = 0;
this.nodes7.opacity = 0;
this.nodes8.opacity = 0;
}.bind(this), 6500);
Expect Result: While Stop Win Function, Fade out function is being disable.

If I understand correctly, you want to disable the setTimeout when stopBigWinAnimations is called.
To do that, you need to name the setTimeout (fadeOutFunction) so you can "clear" it whenever your stopBigWinAnimations function runs.
let fadeOutFunction = null;
public stopBigWinAnimations() {
clearTimeout(fadeOutFunction);
this.mainContainer.opacity = 255
let animBigWin4 = this.nodes4.getComponent(sp.Skeleton);
// Maybe it is not animated or it is the 0th empty node
if (animBigWin4) {
animBigWin4.clearTracks();
animBigWin4.setToSetupPose();
if (animBigWin4.defaultAnimation) {
animBigWin4.setAnimation(0, animBigWin4.defaultAnimation, true);
}
}
}
// Fade Out function
fadeOutFunction = setTimeout(function () {
this.nodes5.opacity = 0;
this.nodes6.opacity = 0;
this.nodes7.opacity = 0;
this.nodes8.opacity = 0;
}.bind(this), 6500);

Fade transition after long period of time gets out of sync with its setInterval

I've been trying to figure out why after a random amount of loops this function fades in multiple lines instead of one at a time. It seems to be that the setInterval gets out of sync. Everything looks correct to me and this is a question to find out what im doing wrong.
Also if there is anything here that you think i could do better that would benefit myself and others please do let me know as I am new to Jquery.
Update ****
I only want one shown at one time the problem im having is that after a random amount of loops it shows more than one or all of them fading at different times.
$(function() {
var items = $('.top-header-fading-headings li');
var index = 0;
items.hide();
function fadingSlider() {
$(items[index]).fadeIn(4000).fadeOut(4000);
index++;
if (index === items.length) {
index = 0;
}
}
fadingSlider();
setInterval( fadingSlider, 8000);
});
Html:
<ul class="no-bullet top-header-fading-headings">
<li><h5>Instant online feedback from outstanding Maths tutors</h5></li>
<li><h5>Smart assessment, tracking and analysis</h5></li>
<li><h5>Cutting edge tools for online tuition</h5></li>
</ul>

Use instead relevant animation method complete callback to call same function recursively:
$(function () {
var items = $('.top-header-fading-headings li');
var index = 0;
items.hide();
function fadingSlider() {
$(items[index]).fadeIn(4000).fadeOut(4000, fadingSlider);//<<<<
index++;
if (index === items.length) {
index = 0;
}
}
fadingSlider();
});
-jsFiddle-

Or use setTimeout inside the function instead:
function fadingSlider() {
$(items[index]).fadeIn(4000).fadeOut(4000);
index++;
if (index === items.length) {
index = 0;
}
setTimeout( fadingSlider, 8000);
}
fadingSlider();

you can try with call back function, no need setInterval,
$(function() {
var items = $('.top-header-fading-headings li');
var index = 0;
items.hide();
function fadingSlider(index) {//pass index as parameter
$(items[index]).fadeIn(4000).fadeOut(4000, function(){
fadingSlider((index === items.length - 1)? 0 : ++index); //recursive call
});
}
fadingSlider(0);//initiate animation
});

Cancel an infinite loop in JavaScript

I am trying to timeout a function in case it has an infinite loop. But the below does not work. Any idea why and how to fix it?
setTimeout(clearValues,1000);
function clearValues(){
i=0;
alert("hi "+i);
}
i=19
function infin(){
while(i>0){
console.log(i);
i++;
}
alert("Done");
}
infin();
In the below case, I get the alert displayed ( a bit later than expected ) and the console statements continue printing even after the alert. That means setTimeout did not wait for the loop to end in this case. Any explanation for this?
setTimeout(clearValues,500);
function clearValues(){
alert("clear");
}
function infin(){
for(i=0;i<10000;){
i=i+0.3;
console.log(i);
}
}
infin();

setTimeout works asynchronously, means it will run after 1000ms and the previous event loop is completed. Since the while loop will never be completed, the callback will never be called.
Add a condition to the loop if you want to exit it.

Another solution might be to use interval:
var code = function(){
console.log('tick');
};
var clock = setInterval(code, 200);
When you don't need it anymore:
clearInterval(clock);

It works, when you made the infin call with a slightly different change.
var i = 0;
setTimeout(clearValues, 1000);
var interval = setInterval(infin, 0);
function clearValues() {
out("clear");
clearInterval(interval);
}
function infin() {
if (i < 10000) { // if you be shure that you
i++;
out(i);
} else { // never reach the limit,
clearInterval(interval); // you can remove the four
} // commented lines
}
function out(s, pre) {
var descriptionNode = document.createElement('div');
if (pre) {
var preNode = document.createElement('pre');
preNode.innerHTML = s + '<br>';
descriptionNode.appendChild(preNode);
} else {
descriptionNode.innerHTML = s + '<br>';
}
document.getElementById('out').appendChild(descriptionNode);
}
<div id="out"></div>

How to pause code execution javascript

This is my code to run DFS on javascript, I searched and try to use setTimeout to delay each draw for 3 seconds but it won't work. Can someone show me the way to do it?
function DFSWithDirectedGraph(v) {
Nodes[v].visited = true;
reDrawNode(Nodes[v].x, Nodes[v].y, Nodes[v].id, 'blue');
for(var j = 0; j<i; j++) {
if(Path[v][j] != undefined && Nodes[j].visited == false) {
drawArrow(Nodes[v].x, Nodes[v].y, Nodes[j].x, Nodes[j].y, 'blue', Path[v][j]);
DFSWithDirectedGraph(j);
if(Path[j][v] != undefined) {
drawArrow(Nodes[j].x, Nodes[j].y, Nodes[v].x, Nodes[v].y, 'green', Path[j][v]);
} else {
drawArrow(Nodes[j].x, Nodes[j].y, Nodes[v].x, Nodes[v].y, 'green', "");
}
}
}
}

setTimeout(function () { ...your code... }, time_in_milliseconds);
Note that in order to repeatedly call a function after say T milliseconds,
function f(params) {
... do your work ...
id = setTimeout(f, T);
}
f(actual_params);
This will call the function f after every T milliseconds. You can remove the timeout using clearTimeout.
clearTimeout(id); // id returned from the setTimeout function

You should use a different type of loop if you want to accomplish this. A for loop won't pause between each time it loops.
I would do something like this:
var counter = 0;
function step(){
//Do your loop code here
counter++;
if(counter >= {{length of loop}}){
endLoop();
}else{
setTimeout(step, 3000);
}
}
step();

How to call the javascript function dynamically

I need to call the javascript function dynamically after some delay, The function display_1, 2, ... n will be dynamically constructed. My script looks like this, but the function never gets triggered if I use the following code, but if I hardcode the function it just seems to be fine.
function display_1() {
alert(1);
}
function display_2() {
alert(2);
}
function display() {
var prefix = 'display_';
for(var i = 1; i < 3; i++) {
setTimeout(prefix.concat(i), 1000);
}
window.onload = display();

Instead of going via a string, you may as well group the functions into an array:
function display_1() {...}
function display_2() { ... }
var functions = [ display_1, display_2 ];
function display() {
for( var i = 0; i != functions.length; ++i ) {
setTimeout( functions[i], 1000 );
}
}
If you want to go further, you may even leave out the explicit function names:
var functions = [
function() { /*the function_1 implementation*/
},
function() { /*the function_2 implementation*/
}
];

you have to add the parenthesis so that the function is called:
setTimeout(prefix.concat(i)+"()", 1000);
or simply:
setTimeout(prefix + i + "()", 1000);
Besides of that please note that both functions are called pratically at the same time, because the timers started with ´setTimeout()` start at the same time.
Depending on what you're trying to do you might have a look at setInterval() or start the second timeout at the end of the display_1() function.

It should be
function display_1() {
alert(1);
}
function display_2() {
alert(2);
}
function display() {
var prefix = 'display_';
for(var i = 1; i < 3; i++) {
setTimeout(prefix.concat(i)+'()', 1000);
}
}
window.onload = display;
the string passed to setTimeout should call the function
onload should be set to a function, not its return value

setInterval('load_testimonial()',5000);//first parameter is your function or what ever the code u want to execute, and second is time in millisecond..
this will help you to execute your function for every given time.

If you really want a 1000ms delay between executing the functions, you could do something like this:
window.onload = function() {
var n = 0;
var functions = [
function() {
alert(1);
setTimeout(functions[n++], 1000);
},
function() {
alert(2);
setTimeout(functions[n++], 1000);
},
function() {
alert(3);
}
];
setTimeout(functions[n++], 1000);
};
(rewrite it in a less-repetitive nature if needed)