Javascript如何使函数/变量全局可用

Question

我是一个初学者，制作了一个自定义的 SoundCloud Player，但是 javascript 不是很好，因为我无法获取全局变量和函数。目前，我在某些函数中具有与另一个函数中相同的代码来计算变量，例如播放器中音乐的当前时间。特别是对于 currenttime，我有 2 个计时器正在运行，而且我还需要一个。解决这个问题的一个简单方法是让像当前秒这样的变量全局可用。

我尝试将所有代码放入 document.ready 或使用返回值，但没有成功。

这是我的代码:

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

它在我的计算机上运行，​​但我想通过将变量设为全局来保存一些代码。

Answer 1

在 Javascript 中，变量始终有一个作用域，因此理论上不存在“全局”变量(例如其他语言中的 static)。

但是您可以在 window 对象(或代码的根级别)上定义任何内容，并且可以在任何地方访问。

例如

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

或者以下具有相同的语义:

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

但请注意，对于后者，您可能存在用本地变量覆盖该变量的潜在危险:

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

所以最好用window来限定它。

这是一个DEMO fiddle为了它。