所以我来自一个沉重的蟒蛇背景,我试图环绕的javascript我的头。 在这里,我有一个返回轨道ID的由艺术家“V-2-追随者”的SoundCloud歌曲阵列功能。 我怎么会去SC.get(东西)的输出分配给一个变量,以重用的另一功能的曲目列表。 我敢肯定,我失去了一些东西根本。 我少找,解释如何做到这一点,但更多的,为什么这就像做了一个答案。
这就是说我也非常欣赏方式。 :)
(function() {
SC.initialize({
client_id:'__CLIENTID__';
});
// Would like to set a variable equal to the output of
SC.get('/tracks', { q: 'v-2-followers' }, function(tracks) {
trackIdList = [];
tracks.forEach(function(track){
trackIdList.push(track.id);
});
return trackIdList;
});
// And use the variable here.
SC.stream('/tracks/'+trackIdList[Math.floor(Math.random() * myArray.length)], function(sound) {
sound.play();
sound.pause();
$('#fabrizio').hover(function(e){
sound.resume();
}, function(e){
sound.pause();
});
});
})();
我可以看到,我失去了一些东西有关变量赋值和范围,或在此函数回调的基础。 我已经用尽自己略读关于这个问题的文档。 如果有人能告诉我如何做到这一点,更重要的是,为什么它这样做的方式,以供将来参考。
你已经trackIdList
为全局变量,因为使用没有创建它var
。 所以,不如说是,你已经可以从任何其他功能进行访问。 如果你想它的范围限制在刚刚外部函数,增加var trackIdList;
为你的函数的第一行。 你应该用声明变量var
处处以限制其范围。
(function() {
var trackIdList;
...
})();
延伸阅读: 什么是JavaScript中变量的作用域?
你需要了解的另一个概念是关于JavaScript的异步执行和回调。 你的代码填充trackIdList
包含您的来电后调用回调函数,它是(最有可能)内SC.stream()
如果SC.stream()
取决于价值trackIdList
,应该从回调函数被调用。
这可能有助于说明发生了什么事情通过分离出你的回调函数。
(function () {
var trackIdList = [];
SC.initialize({
client_id: '__CLIENTID__'
});
SC.get('/tracks', { q: 'v-2-followers' }, processTracks);
var randomIndex = Math.floor(Math.random() * myArray.length);
SC.stream('/tracks/' + trackIdList[randomIndex], processSound);
function processTracks(tracks) {
tracks.forEach(function (track) {
trackIdList.push(track.id);
});
}
function processSound(sound) {
sound.play();
sound.pause();
$('#fabrizio').hover(function (e) {
sound.resume();
}, function (e) {
sound.pause();
});
}
})();
SC.get()
使得异步请求并立即返回。 然后SC.stream()
被调用,而不必等待返回请求 。 processTracks()
不叫,直到请求回来。 麻烦的是, SC.stream()
取决于processTracks()
但立即调用。 为了解决这个问题,请致电SC.stream()
从回调函数SC.get()
(function () {
SC.initialize({
client_id: '__CLIENTID__'
});
SC.get('/tracks', { q: 'v-2-followers' }, processTracks);
function processTracks(tracks) {
var trackIdList = [];
tracks.forEach(function (track) {
trackIdList.push(track.id);
});
var randomIndex = Math.floor(Math.random() * myArray.length);
SC.stream('/tracks/' + trackIdList[randomIndex], processSound);
}
function processSound(sound) {
sound.play();
sound.pause();
$('#fabrizio').hover(function (e) {
sound.resume();
}, function (e) {
sound.pause();
});
}
})();
我将解释一个办法 - 用回调。 人们之所以做这种方式是有同步操作,和异步操作。 在你的情况,你需要执行一个AJAX请求-我们不知道多久会采取SC.get
来完成的,我们不希望程序挂起,而我们等待吧。 因此,而不是等待,我们告诉它“去把这些曲目,和我路过你的函数完成后调用。在此期间,我将与程序的其他部分去好了。”
(function() {
SC.initialize({
client_id:'__CLIENTID__'
});
var getTracks = function(callback) {
SC.get('/tracks', { q: 'v-2-followers' }, function(tracks) {
trackIdList = [];
tracks.forEach(function(track){
trackIdList.push(track.id);
});
callback(trackIdList);
});
}
// And use the variable here.
var stream = function(trackIdList) {
SC.stream('/tracks/'+trackIdList[Math.floor(Math.random() * myArray.length)], function(sound) {
sound.play();
sound.pause();
$('#fabrizio').hover(function(e){
sound.resume();
}, function(e){
sound.pause();
});
});
}
getTracks(stream);
})();