We Keep Coding

How can I open two URLs with a five second delay?

I have the below javascript code. Basically what I want to do is when a user is clicking on the hyperlink, I want to open a new tab, call https://somesite.com/logout, first, wait 5 seconds and then call https://www.somesite.com
This is possible to do? If so, what changes can I make to this code to get that done?
script type="text/javascript">
window.onload = function() {
document.getElementById("mySite").onclick = function() {myFunction()};
function myFunction() {
//your code goes here
var win1= window.open("https://somesite.com/logout");
win1.close();
}
};
</script>
<a href='https://www.somesite.com' target='_blank' id='mysite'>Click Here</a>

window.onload = function() {
document.getElementById("mysite").onclick = function() {myFunction()};
function myFunction() {
//your code goes here
var win1= window.open("https://somesite.com/logout");
win1.close();
window.setTimeout(function() {
window.open("https://somesite.com");
}, 5000);
}
};
getElementById is case sensitive, so be sure to use "mysite". You can set a timeout to open a window after 5000ms (5 seconds).
Also, be aware that browsers will typically block popups by default.

Just add window.setTimeout(window.location.reload(), 5000) after close()

how to stop a Javascript function when the user switch tab or minimize the broswer

I'm creating a chat that need to retrieve messages from PHP using AJAX in intervals. The problem is that the users can open multiple tab of different chatroom, and that's going to take a a lot of resource from the server. So, how can I stop a function in the other tabs when the user switches page, then reactive it when they return to the tab. I'm new to coding so please keep the code as simple as possible (NO jQuery please.)
Here is an function test I was trying, but no luck:
function window_active(){
window.onfocus = function() {
test()
};
window.onblur = function() {
//stop the script OR change the setTimeout so the functon run less.
};
}
function test(){
alert('adadasdad');
setTimeout(function(){}, 10000);
}
Thanks in advance. (:
Update:
requestAnimationFrame() didnt work.
function loop() {
var div_id = document.getElementById('tester');
var msg = document.createTextNode("sadksadkjsahdjkasdjkahdjkas");
div_id.appendChild(msg);
setTimeout( function() {
requestAnimationFrame( function() {
loop();
} );
}, 1000 );
}
Update 2:
Counldn't find this answer anywhere, and then I got lucky and found this page with the help of ehynds answer about "document.hidden". Thanks ehynds! (:
function loop() {
//do stuff.
setTimeout( function() {
if(document.hasFocus()){
//"document.hasFocus()" return **true** only if your on the tab.
loop();
}
}, 1000);
window.onfocus = function() {
//reactivted the function.
loop();
};
}
Hopes this help someone looking for the answer. (:

HTML5 visibility API:
document.addEventListener('visibilitychange', function() {
document.hidden; // whether or not the tab is visible
});

Sequencing two action on a button click

Problem: I have a asp.net button and on click of that I am displaying another window using window.open() at the client side using <script></script>
"I actually, need a popup (alert message) to be displayed on my parent page where my button is located once the user closes the child window."
Couple of things I tried are as follows:
I tried using setTimeOut() to have a time out for some milliseconds. This does not work as the control is not waiting until the time out is complete. It just proceeds to execute next set of code.
I tried using setInterval() but for some reason it is not working for me. Below is the code snippet of that:
$(document).ready(function () {
$('#<%=btnClick.ClientID%>').bind('click', function () {
var newWindow = window.open("http://www.google.com/", "google", 'resizable=1,width=900,height=800,scrollbars=1', '_blank');
newWindow.moveTo(0, 0);
var test = setInterval(function (e) {
if (newWindow.closed) {
alert("HEYY");
clearInterval(test);
__doPostBack("<%= btnClick.UniqueID %>", "");
}
else {
e.preventDefault();
}
}, 5000);
});
});
.
I also tried making an ajax call to open the new window and make it async : false, it again did not help me.

Bring your window and timer variable out of scope of the event handler. You need to do a polling i.e. periodically keep on checking if the windows has been closed. Using setInterval to do a polling will do the job.
var newWin, pollTimer;
$('#btnId').bind('click', function () {
newWin = window.open("...", "...", "");
pollTimer = window.setInterval(function() {
if (newWin.closed) {
window.clearInterval(pollTimer);
callCodeWhenPopupCloses();
}
}, 5000);
});
function callCodeWhenPopupCloses() {
alert("Popup closed.");
...
}

How to create timer in my case?

I am trying to have my button doing two things.
init a timer to call a function
call the same function
I have something like the following
test.prototype.setupEvent= function(){
var instance = this;
$('#btn').on('click', function(){
clearInterval(instance.timer);
this.showStuff()
instance.timer=setInterval(function(){
instance.showStuff()
},10000);
})
}
test.prototype.showStuff= function(btnID){
//jump to another page
}
My problem is that I want the user be able to see some contents after 10 second when they first click it, however, if they click the button again before 10 second is up, they can see the contents too. I am not sure how to distinguish the two different states with one click event. Can anyone help me out? Thanks!

Try
test.prototype.setupEvent = function () {
var instance = this;
$('#btn').on('click', function () {
//if there is a timer running then clear the timer, show the content and delete the timer reference
if (instance.timer) {
clearInterval(instance.timer);
instance.showStuff();
delete instance.timer
return;
}
//also you may want to use setTimeout() not setInverval()
instance.timer = setInterval(function () {
instance.showStuff();
delete instance.timer
}, 10000);
})
}
test.prototype.showStuff = function (btnID) {
//jump to another page
}

JavaScript/HTML - Alert box goes before sound?

The code:
x = new Audio("bar.wav")
x.play()
alert("foo")
Why does the alert box show up first and then then sound is played??

That's because the sound file is loaded asynchronously by JavaScript and then the code continues to execute. The alert fires first because it takes a while to load the sound file.
To fix it, you need to add an event listener on load, like so:
x.addEventListener('load', function() {
x.play();
alert("foo");
});
Or you could add the event listener to the onplay event, like so:
x.onplay = function () { alert("foo"); };
x.play();

You should wait for the playing event. Thats when the sound actually starts playing.
But just an advice that alert boxes pause code execution and could really mess up with sound.
x = new Audio("bar.wav")
x.onplaying = function ()
{
alert("foo");
}
x.play();

EDIT: on this post, a onloadeddata event is used, its more intesting than the example below, but i havent tested it: HTML5 Audio events not triggering on Chrome
--
As you can't assign an onload event, you have to do this:
$(function(){
youraudioelement = new Audio("bar.wav")
var audioReady = function(){
if (youraudioelement.attr('readyState')) {
alert("foo");
} else {
setTimeout(audioReady, 250);
}
}
audioReady();
}
HTML5 Audio onLoad

Just use :
x.onended = function () { alert("foo"); };
x.play();