kruben kruben - 7 months ago 9
Javascript Question

Javascript how to make functions/variables globally available

I am a beginner and made an custom SoundCloud Player, but the javascript is not very good because I couldn't get the variables and functions to get global. At the moment I have in some functions the same code as in another function to calculate a variable like the current time of the music in the player. especially for the

currenttime
I have 2 timers running and I need one more, too. An easy way to solve this would be to make variables like the current second globally available.

I've tried to put all the code in a
document.ready
or use return values but it didn't work.

Here is my code:

function toggle() {
var widget = SC.Widget(document.getElementById('soundcloud_widget'));
widget.isPaused(function(boolean){
widget.toggle();
playing = boolean;
if(playing == true)
{
playtoggle.className ="";
playtoggle.className ="play";
}
else if(playing == false)
{
playtoggle.className ="";
playtoggle.className ="pause";
}
});
}
function refresher()
{
setInterval(function(){timer()},10);

var widget = SC.Widget(document.getElementById('soundcloud_widget'));

widget.getDuration(function(duration){
endtime = Math.round(duration/1000);
var minute = Math.floor((endtime / 100) * 100 / 60);
var sekunde = Math.round(endtime - (minute * 60));
if(sekunde<10)
{
document.getElementById('endtime').innerHTML = " "+ minute + ":0" + sekunde;
}
else
{
document.getElementById('endtime').innerHTML = " "+ minute + ":" + sekunde;
}
});

}
function timer() {
var widget = SC.Widget(document.getElementById('soundcloud_widget'));

widget.getCurrentSound(function(music){
document.getElementById('title').innerHTML = music.title;
})

widget.getPosition(function(position){
currenttime = Math.round(position/1000);
currentminute = Math.floor((currenttime /100) * 100 / 60);
currentsek = Math.round(currenttime - (currentminute * 60));
if(currentsek < 10)
{
document.getElementById('time').innerHTML = currentminute + ":0" + currentsek;
}
else
{
document.getElementById('time').innerHTML = currentminute + ":" + currentsek;
}

widget.getDuration(function(duration){
endtime = Math.round(duration/1000);
minute = Math.floor((endtime / 100) * 100 / 60);
sekunde = Math.round(endtime - (minute * 60));

var pWidth = $('#gutter').width();
var seekToposition = (position / duration)*pWidth;
$('#seekTo').css('left', seekToposition-15+"px");
$('#progress').css('width', seekToposition+"px");
});

if(currentminute == minute && currentsek == sekunde)
{
playtoggle.className="";
playtoggle.className="pause";
}
});
}
function seekTo() {
var widget = SC.Widget(document.getElementById('soundcloud_widget'));

var pWidth = $('#gutter').width();
$('#gutter').click(function(e){
var scrub = (e.pageX);
$('#seekTo').css('left', scrub+"px");
$('#progress').css('width', scrub+"px");
widget.seekTo((scrub)/pWidth*311498);
});
}
function keyfunction(e){
var widget = SC.Widget(document.getElementById('soundcloud_widget'));
switch(e.keyCode){
case 32:
widget.isPaused(function(boolean){
widget.toggle();
playing = boolean;
if(playing == true)
{
playtoggle.className ="";
playtoggle.className ="play";
}
else if(playing == false)
{
playtoggle.className ="";
playtoggle.className ="pause";
}
});
break;
}
}


JSFiddle

On my computer it runs but I want to save some code by doing the variables make global.

Answer

In Javascript there is always a scope for a variable, so in theory there is no such as "global" variable (like static in other languages for example).

But you can define anything on the window object (or in the root level of your code), which is accessible anywhere.

For example

window.myVariable = 4;
function alertMyVariable() {
  alert(window.myVariable); // alerts 4;
}

or the following has the same semantics:

var myVariable = 4;
function alertMyVariable() {
  alert(myVariable); // alerts 4;
}

But note that with the latter you have a potential danger of overriding that variable with a local one:

var myVariable = 4;
function alertMyVariable() {
  var myVariable = 6;
  alert(myVariable); // alerts 6!;
}

so it's probably better to qualify it with window.

Here is a DEMO fiddle for it.