We Keep Coding

Stop a recursive function

I am completely new in javascript and jquery... I have searched but can not find an answer to my problem...
I need to stop a function that call itself at the end (I read that this is called recursive function)
So my html
<div id="slide_show"></div>
Stop
My js
//call effect on load
$(function() {
moveSlide(true);
});
//move the div
function moveSlide(repeat) {
if(repeat === true) {
$('#slide_show').slideToggle('slow',function() {
setTimeout(function() {
moveSlide(true);
},2000);
});
} else {
return;
}
}
//stop the function
$(document).on('click','.stop',function(e) {
e.preventDefault();
moveSlide(false);
});
The function is called forever but I want to stop the function of being repeated when I click the button
What am I doing wrong?

Try with: clearTimeout() in else condition .
You need to create the setTimeout() in one variable.Then apply the clearTimout() if the condition is false(Its means a else statement)
var timer;
//call effect on load
$(function() {
moveSlide(true);
});
//move the div
function moveSlide(repeat) {
if(repeat === true) {
console.log('running')
$('#slide_show').slideToggle('slow',function() {
timer = setTimeout(function() {
moveSlide(true);
},2000);
});
} else {
clearTimeout(timer);
console.log('stopped')
return;
}
}
//stop the function
$(document).on('click','.stop',function(e) {
e.preventDefault();
moveSlide(false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="slide_show"></div>
Stop

I see that you are calling ever time at the method moveSlide, into the setTimeout
$('#slide_show').slideToggle('slow',function() {
setTimeout(function() {
**///moveSlide(true); ///here , will be calling recursive untill end**
},2000);
});
Test and tell us, if will help it
tks

Jquery Animations not waiting for callback

I have a Jquery animation that is running the code from its function before the animation is complete. the Page this code is being used at is no where near complete yet but if you want to take a look it's cottageboards.com/orderform
$('#snow').fadeIn(500, "linear", function () {
$('#largeImage').fadeOut(500, function () {
$('#largeImage').attr('src', selectedimg).load(function () {
$('#largeImage').fadeIn(1000, function () {
//Everything below here is running before the above image's fade in is complete
$('#snow').fadeOut(5000);
var selection = 'input[name="' + $(selectionage).data('type') + '_selection"]';
$($('#selected_thumb').val()).attr('src', $($('#selected_thumb').val()).data('regular'));
$(selectionage).attr('src', $(selectionage).data('selected'));
selectedid = '#' + $(selectionage).attr('id');
$('#selected_thumb').val(selectedid);
$('#selected_info').html($(selectionage).data('desc'));
$('#name').html($(selectionage).data('name'));
if ($(selectionage).data('val') === 99) {
$('#upload').show();
$('#displayinfo').hide();
} else {
$(selection).val($(selectionage).data('val'));
$('#upload').hide();
$('#displayinfo').show();
}
$('#next').prop('disabled', false);
});
});
});
});
When rewritten so the load function comes before the src change it works like a charm. Thanks for the help guys!
Working code:
$('#snow').fadeIn(500, "linear", function () {
$('#largeImage').fadeOut(500, function () {
$('#largeImage').unbind().load(function () {
$('#largeImage').fadeIn(1000, function () {
$('#snow').fadeOut(5000);
var selection = 'input[name="' + $(selectionage).data('type') + '_selection"]';
$($('#selected_thumb').val()).attr('src', $($('#selected_thumb').val()).data('regular'));
$(selectionage).attr('src', $(selectionage).data('selected'));
selectedid = '#' + $(selectionage).attr('id');
$('#selected_thumb').val(selectedid);
$('#selected_info').html($(selectionage).data('desc'));
$('#name').html($(selectionage).data('name'));
if ($(selectionage).data('val') === 99) {
$('#upload').show();
$('#displayinfo').hide();
} else {
$(selection).val($(selectionage).data('val'));
$('#upload').hide();
$('#displayinfo').show();
}
$('#next').prop('disabled', false);
});
}).attr('src', selectedimg);
});
});

You are binding the load function to largeimage every time you click. The first click the load function gets called once, the second time, it gets called twice. I suspect everything is getting messed up because you are firing multiple .fadeIns on the same object, and they are running in parallel.
Only call $('#largeImage').load(...) once, not on every click. Of course, you'll have to do something about your captured vars, but that's a different issue. Alternatively, call $('#largeImage').unbind().load(...)
If that's hard to follow, replace this line:
$('#largeImage').attr('src', selectedimg).load(function () {
with:
$('#largeImage').unbind().attr('src', selectedimg).load(function () {
I tested it by putting a break point after this line:
$('#thumbs').delegate('img','click', function() {
and calling $('#largeImage').unbind(); and everything seemed to work, so you can do it that way too.

see this fiddle for example how to use done : http://jsfiddle.net/gcnes8b2/1/
$('span').click(function() {
$('#1').fadeIn({
duration: 1000,
done:function(){
$('#2').fadeOut(1000);
// etc
}
});
});

A .Click function not working in jQuery

What I need:
I need the button2 to appear when button1 is clicked. NEW STUFF: What I need it to do is save button2 there so if you refresh or "run" button 2 is already there how would I do that?
What I've done/Tried:
I've tried a bunch of different things such as changing it around changing the scope, as well as checking for console errors, I get none so I'm not too sure what is going on.
CODE
$(document).ready(function () {
$('#button2').hide();
window.highestLevel = 1;
$('#button1').click(function () {
Check();
highestLevel = 2;
});
if (highestLevel == 2) {
$('#button2').show();
}
function Check() {
localStorage.setItem('highestLevel', highestLevel);
}
});
WHAT WORKS
The only thing that works is it stores it correctly to the html local storage when I click $('#button1').
Link , jsFiddle

For this to work as you describe, the if-structure ...
if (highestLevel == 2) {
$('#button2').show();
}
... must be inside the click function. Try ...
$('#button1').click(function () {
Check();
highestLevel = 2;
$('#button2').show();
});
You really don't need the if-structure doing it this way ... in your code, the if-structure only runs on document-ready (ONE TIME).

You are mistaken about what is happening. This code block runs when the document is loaded, not after button1 is clicked.
You want to put it inside the click function
$('#button1').click(function () {
Check();
highestLevel = 2;
if (highestLevel == 2) {
$('#button2').show();
}
})
You will also want to prevent the default action of the button, which is to post the page causing it to reload, by adding an event object
$('#button1').click(function (e) {
e.preventDefault();
Check();
highestLevel = 2;
if (highestLevel == 2) {
$('#button2').show();
}
})
});

You don't need all of that... The problem is that
if (highestLevel == 2) {
$('#button2').show();
}
executes only once, when the document is ready.
Try this:
$(document).ready(function () {
$('#button2').hide();
$('#button1').click(function () {
$('#button2').show();
});
});

Try with this
window.highestLevel = localStorage.getItem('highestLevel');
$(document).ready(function () {
if (highestLevel == 2) {
$('#button2').show();
$('#button1').hide();
}
else {
highestLevel == 1
$('#button1').show();
$('#button2').hide();
}
$('div').click(function () {
if (highestLevel == 2) {
highestLevel = 1;
$('#button1').show();
$('#button2').hide();
}
else{
highestLevel = 2;
$('#button2').show();
$('#button1').hide();
}
Check();
});
});
function Check() {
localStorage.setItem('highestLevel', highestLevel);
}

access method inside of require js

I am getting this error:
ReferenceError: overlay is not defined
overlay();
I need to access a method that is inside of requireJS in jquery.vegas. How can i do that?
require(["jquery"], function($) {
require(["files/jquery.vegas"], function(jQuery) {
set_overlay = true;
...
function overlay() {
$.vegas('overlay', {
src : 'overlays/10.png'
});
}
});
});
jquery.vegas
(function($) {
function loading() {
if (set_overlay == true) {
overlay();
}
}
})(jQuery);

In simple words, you can't access the function overlay since it is a closure function inside the annonymous function.
If the above code is in your control then I would suggest you to move the function overlay to a shared context between these two methods
ie
function overlay() {
$.vegas('overlay', {
src : 'overlays/10.png'
});
}
require(["jquery"], function($) {
require(["files/jquery.vegas"], function(jQuery) {
set_overlay = true;
...
});
});
(function($) {
function loading() {
if (set_overlay == true) {
overlay();
}
}
})(jQuery);

Recursive function : where am I wrong here?

Code :
isDomLoaded = $(function () {
setTimeout(function () {
if (renderFinished) {
renderSocial(fotoProssima);
} else {
isDomLoaded();
}
}, 300);
});
it says isDomLoaded is not a function

Thats because it isn't a function. It is a jQuery object.
What you need might be:
isDomLoaded = function () {
setTimeout(function () {
if (renderFinished) {
renderSocial(fotoProssima);
} else {
isDomLoaded();
}
}, 300);
};
If you want to run it when the DOM is ready then do this after you declare the function:
$(window).load(isDomLoaded);
However, I think what you really need is to get rid of the isDomLoaded function and just use the following:
$(document).ready(function(){
renderSocial(fotoProssima);
});

function isDomLoaded(){
//code
//recursive call
isDomLoaded();
}