We Keep Coding

running a while loop alongside jQuery without crashing the website

I need a constantly running while loop to check alot of if (value < otherValue || value === otherValue) without making the website crash and still be able to accept click events, etc...
Here is some of my code:
$(document).ready(function(){
var value = 0;
var otherValue = 25;
var otherValue2 = 75;
var otherValue3 = 100;
var otherValue4 = 125;
var otherValue5 = 175;
var otherValue6 = 200;
var otherValue7 = 300;
$('#button').click(function(){
value += 5;
// Here i make the value show on the page like fancy, but It's not essential for this question
});
});
So, how do I include a constantly running while loop that makes that code still functional, and doesn't crash the website?

I would take a look at setInterval it will allow you to execute a function every set amount of time.
var interval = null;
var value = 0;
var otherValue = 25;
var intervalTimer = 100; // 100ms
$('input').val(value);
$('button').on('click', function(){
interval = setInterval(function(){
$('input').val(value += 5);
}, intervalTimer);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<button>
Start Updating Value
</button>

JavaScript clearInterval

I'd like to have a div become visible on a button click and have a setInterval append periods to show loading. I would also like a button to clear that interval and hide the div that shows up.
here's a fiddle
http://jsfiddle.net/4qx4r/4/
here's code:
function ProgressBar(){
var div;
var start = function(){
var count = 0,
div = $('#divNotification').show().text('Uploading').css('align','center'),
originalText = div.text(),
count = 0;
var beginCount = setInterval(function(){
var newText = div.text() + '.';
div.text(newText);
count++;
if(count > 5){
div.text(originalText);
count =0;
}
console.log(count);
},500)
}
var stop = function(){
console.log('stop');
div.hide();
window.clearInterval(beginCount);
}
this.start = start;
this.stop = stop;
}
var progressBar = new ProgressBar();
$('#btnStart').click(function(){
progressBar.start();
});
$('#btnStop').click(function(){
progressBar.stop();
});
Currently when I click btnStop I get `cannot read property hide of undefined'. How can I make this stop the interval and hide the div?

You are setting var beginCount within a function, therefore that variable is only accessible within that function.
Try declaring that variable outside or simply just remove the var part.
I would add it next to var div declaration
Also you need to replace commas with semicolons and your div is not set to the object, try the following:
var count = 0;
div = $('#divNotification');
div.show().text('Uploading').css('align','center');
originalText = div.text();
count = 0;
http://jsfiddle.net/4qx4r/6/

this works: http://jsfiddle.net/W8ySn/3/
I separated the initial div assignment:
div = $('#divNotification');
var count = 0;
div.show().text('Uploading editor').css('align','center');
originalText = div.text();
count = 0;

Getting setInterval to work through child elements in a html list item

I'm using the setInterval() method to try apply a class to each individual li.
I've created a jsFiddle that applies the toggleClass but I cannot get it to apply the class one by one.
Below is my javaScript, I've also added a link to the jsFiddle:
var i = 1;
var id = setInterval(function () {
$("ul").children(i).toggleClass('test');
i++;
if (i === 4) {
i = 1;
}
}, 1000);
http://jsfiddle.net/Svx3n/42/

Two issues that I spot:
When working with indexes, the index starts at zero, not one.
.children(\[selector\]) does not take an index, it takes a selector. So you are asking jQuery to find the element of type of one. Instead use .eq(index) to get the element.
So the changes to your code would be:
var i = 0;
var id = setInterval(function () {
$("ul").children().eq(i).toggleClass('test');
i++;
if (i === 4) {
i = 0;
}
}, 1000);
Better yet, move the selecting out so you are not doing the querying of the DOM every iteration
var i = 0,
lis = $("ul").children(),
id = window.setInterval( function () {
lis.eq(i).toggleClass('test');
i++;
if (i === 4) {
i = 0;
}
}, 1000);

You need to use ":nth-child" in conjunction with "i"

Demo
var i = 0;
var id = setInterval(function () {
$("ul li").eq(i).toggleClass('test');
i++;
if (i === 4) {
i = 0;
}
}, 1000);

Try
var i = 0, $lis = $("ul li");
var id = setInterval(function () {
$lis.eq(i).toggleClass('test');
i++;
i = i % $lis.length;
}, 1000);
Demo: Fiddle

How to disable buttons after x amount of clicks in js?

I am trying to use Javascript to disable a button after it is clicked x amount of times. For simplicity sake lets say x = 2 for now. I cannot seem to get the counter to increment. Thank You for any help!
var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
coke.onclick = function(){
var count =0;
if (count >= 1)
{
coke.disabled = true;
}
else
count++;
};
}
Where "coke" is the element ID. If i get rid of the if statement and just have coke.disabled = true, of course it works and disables after one click. I'm sure there is a core concept I am missing.
Thank You

This is happening because each time the onclick event is fired, your var count is being assigned to 0, so it will never be greater than or equal to one in your function. If you initialize the count var outside of the onclick function, it will behave as expected.
window.onload = function () {
var count = 0;
coke.onclick = function(){
if (count >= 1)
{
coke.disabled = true;
}
else
count++;
};
}

You need to define count outside the scope of your onclick function:
var $ = function (id) {
return document.getElementById(id);
}
var count = 0; // set initial count to 0
window.onload = function () {
coke.onclick = function(){
if (count >= 1)
{
coke.disabled = true;
}
else
count++;
};
}

Javascript content rotator?

I’ve got the basics of a content rotator done, the only problem is it doesn’t loop itself back to the beginning and I cannot figure out why! It is a very simple javascript script:
window.onload = function() { setInterval("transition()", 5000); }
function transition()
{
var y = document.getElementById("featured").getElementsByTagName("li");
for (var i=0;i<y.length;i++)
{
if (y[i].className == "current")
{
y[(i+1)].className = "current";
y[i].className = "";
break;
}
}
}
It keeps stopping at the end of the list, basically I just want it to loop. Any help?

You can make this a little smarter by taking advantage of the wonderful language that is Javascript:
window.onload = function() {
var y = document.getElementById('featured').getElementsByTagName('li');
var ylen = y.length, index = 0;
y[0].className = 'current';
setInterval(function() {
y[index].className = '';
index = (index + 1) % ylen;
y[index].className = 'current';
}, 5000);
};
When you pre-define the list of <li> elements like that, the function you provide for the interval timer can reference them every time the timer fires. The index variable increments up until it hits the end of the array, and then it'll be set back to zero.

try this:
if (y[i].className == "current")
{
if (y[i+1]]
y[i+1].className = "current";
else
y[0].className = "current";
y[i].className = "";
break;
}

First time you loop you set the last elements class "current". You should put something like
y[0].className = "current"
when you reach and of the loop.