以编程方式创建一个javascript函数

Question

需要这个用于youtube api // onStateChange回调函数!

我想以编程方式创建将听取几个youtube播放器发出的"onStateChange"事件的函数.添加侦听器已经起作用:

function onYouTubePlayerReady(playerId) {
  var ytpStateManager = playerId +"_StateManager";
  document.getElementById(playerId).addEventListener("onStateChange", ytpStateManager );
...

我需要根据playerId变量("ytp_1","ytp_2",...)创建的函数是

function ytpStateManager(newState) {
  ytpStateHelper(playerId , newState);
}

所以playerId"ytp_1"的结果如下所示:

function ytp_1_StateManager(newState) {
  ytpStateHelper("ytp_1", newState);
}

也工作但是现在我需要为每个玩家手动添加它们,这不是我需要的.我想在新玩家发送readyState事件时自动创建它们.

我的问题是,似乎这些函数需要是一个全局函数才能正常工作.我现在几天尝试了几种选择.我的问题是我不知道如何(如果有办法)定义一个全局函数,包括.功能名称,以编程方式,基于另一个变量.

令人失望的是,ytp不会发出包含状态和玩家/目标的事件.会让事情变得更容易.所有这些基本上都是解决方法,因为我需要所有的stateChanges做所有事情.

如果有更好/更简单的方法,请告诉我:)否则非常欢迎这个问题的解决方案.

也许有办法重新举办活动,让它更"易于接近"？

我在规范中读到.addEventListener也接受一个对象,所以我试图将事件绑定到一个专用对象.但同样,它没有被触发.感觉像我测试了一切......

更新 我现在切换到iframe播放器(来自swfobject),因为那个提供了一个包含playerId和state的事件:D Yeahhh !! 在错误的ytplayer度过了一周之后,这感觉就像是一次伟大的进步.似乎也希望我们使用iframe播放器,它可以在支持时动态使用html5.

Answer 1

您创建一个返回函数的函数：

function createStateManager(playerId) {
    return function (newState) {
        ytpStateHelper(playerId , newState);
    }
}

然后在设置事件侦听器时调用函数工厂：

var player = document.getElementById(playerId);
player.addEventListener("onStateChange", createStateManager(playerId));

调试

我不确定为什么这不起作用，但这里有一个调试建议。我怀疑你可能没有得到playerId你的onYouTubePlayerReady处理程序。

function onYouTubePlayerReady(playerId) {
    console.log('Player ready. The player id is: ' + playerId);
    var ytpStateManager = playerId +"_StateManager";
    var player = document.getElementById(playerId);
    player.addEventListener("onStateChange", createStateManager(playerId));
}

function createStateManager(playerId) {
    return function (newState) {
        console.log('State changed for player ' + playerId + '. New state is ' + newState);
        ytpStateHelper(playerId , newState);
    }
}

你能试试那个，然后发布你从两个console.log电话中得到的信息吗？