We Keep Coding

Wait before starting JavaScript function

I'm trying to play a sound every time a user gets a new notification. The way I am loading the notifications on my page is simple:
(function($)
{
$(document).ready(function()
{
var $container = $("#noti");
$container.load("notify.php");
var refreshId = setInterval(function()
{
$container.load('notify.php');
}, 1000);
});
})(jQuery);
This works by updating a div container with whatever number the PHP code sends out. it retries every second (probably not the most efficient way, but it works).
I have another piece of code that checks when the div content changes, then creates an alert box (which I will change to playing a sound when the script is done):
var myElement = document.getElementById('noti');
if(window.addEventListener) {
// Normal browsers
myElement.addEventListener('DOMSubtreeModified', contentChanged, false);
} else
if(window.attachEvent) {
// IE
myElement.attachEvent('DOMSubtreeModified', contentChanged);
}
function contentChanged() {
// this function will run each time the content of the DIV changes
alert("js is working");
}
This script works, however it also creates an alert or the first loading of the notifications. This is because it starts of as an empty div, then it loads the data, which sets off this alert script. The only way I could think about going round this is delaying the script from loading for a couple of seconds whilst the AJAX script does its business.
Does anyone know a way I could delay this second script from doing anything for the first few seconds after page load, or perhaps a better way about going round this?

Instead of doing that, use a custom event which you trigger when load finishes:
var refreshId = setInterval(reloadContainer, 1000)
function reloadContainer() {
$container.load('notify.php', function success() {
$container.trigger('loaded')
})
}
$(myElement).on('loaded', contentChanged)

Delay function after calling in Javascript

I've been having trouble finding any delays right after a function is executed. The problem is that the href loads a little slow and the function takes in effect before the _target page is loaded. You can see the change coming into effect immediately. I'd like to have a little timer to wait a few seconds before the function takes affect.
I've tried setInterval inside a var, but it doesn't seem to be working. setInterval by itself keeps running once the page is clicked and I don't want that. I want the timer to be started once the image is clicked and the link loaded.
<script type='text/javascript'>
function change() {
var image = document.getElementById('doge');
image.src = 'img/doge.png';
document.getElementById("text").innerHTML="<b>such wow</b> much amaze <b><i>very effort</b></i>"
}
</script>
<img src='Logo_256.png' alt='doge' id='doge' onclick='change();'>
<small id='text'>This page was last modified on Wednesday, November 20, 2013 8:43:13 PM</small>
I assure you everything works, so don't mind if the .jpg or .png match up (just edited right now).

Add a timeout to the things that the function does, so the delay occurs when the function runs what you want to happen in your change() function after a setTimeout():
var change = function(){
setTimeout(function() {
var image = document.getElementById('doge');
image.src = 'img/doge.png';
document.getElementById("text").innerHTML="<b>such wow</b> much amaze <b><i>very effort</b></i>"
}, 5000);
};

Refresh a certain div

Can anyone give me advice on how to make a div refresh.
I'm making a chess game and I want the div to load every time the other player posts data into the database. My game is almost finished the thing is, when you move a piece, Player 2 wont see the move that Player 1 made, when Player 2 refreshes the browser he/she can now see that the Player 1 has moved a piece.
How can I achieve this automatically?
I'm using jQuery and Ajax.

something like:
<script type="text/javascript">
window.onload = setupRefresh;
var interval = 1000;
function setupRefresh() {
setTimeout("refreshPage();", interval); // milliseconds
}
function refreshPage() {
//get game state using ajax and update div
}
this will refresh every second (== 1000ms, change to what you want/need), you need to implement the stuff in refreshPage()

Try this,Auto Load and Refresh Div every 10 Seconds with jQuery.
cant answer more without showing what you already done?

Hope something like this might help you... :)
$(document).ready(function(){
setInterval(targetDiv, 1000);
});
function targetDiv(){
$.ajax({
url: "/refresh_your_div_function",
//Other code u need to perform
}).done(function() {
//Your code
});
}

Code being multiplied and all instances are running

My website works in a way so that any links clicked do not load a new page but however trigger a .load() event into a div named "content".
Everything has been nice and dandy but now I have run into a small problem.
On one of the content pages, I have the following code:
$('.count').each(function () {
$this = $(this);
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});
The code works... it works very well. But when I load that same page again, it seems like the code is running twice because the seconds are going down by 2 at a time. Then when I load it again, it's going down by 3 seconds at a time. Another load, and it goes down by 4 seconds at a time. I load it a couple more times and it goes down faster then I can read.
I tried giving the .count divs their own unique id's (the .remain div is nested inside the .count div), even when pages are subsequently loaded the id is still entirely different and this did not fix my problem. I also tried putting clearInterval(countdown) right before the function but that just made it stop working entirely. Any suggestions?
And yes I know the countdown doesn't currently stop when it reaches 0.

Try this:
var countdown;
$('.count').each(function () {
$this = $(this);
if (!countdown)
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});

jQuery set initial speed of fadein

I want this div to load instantly on page load (or thereabouts) and then automatically refresh every 10 seconds.
This is what I have, which refreshes every 10 seconds but doesn’t load instantly.
Can I set the initial refresh to say 100ms and then after that refresh every 10 seconds?
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
}
, 10000); // refresh every 10000 milliseconds
</script>

You need to run it once first.
<script type="text/javascript">
$(function() {
function nowPLaying()
{
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
}
nowPLaying();
var auto_refresh = setInterval(nowPLaying, 10000); // refresh every 10000 milliseconds
});
</script>

You could just load it, then set the interval:
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
var auto_refresh = setInterval(function (){
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
}, 10000);
You could forgo the whole setInterval() for a setTimeout() instead. For instance:
var loadNowPlayingInfo = function(){
$('#now-playing').load('now-playing-info.php').fadeIn("fast");
setTimeout(loadNowPlayingInfo, 10000);
}
loadNowPlayingInfo(); // Calls the function, then starts your interval
I would consider the second the better option. Note as well, you might want to but the setTimeout() in the success handler of the .load() so it waits for the previous to load.