Javascript 使用popcorn.js迭代cue方法

我试图在视频中设置多个提示点。我不想把每个提示都写出来，而是想迭代一个对象，该对象包含我需要的数据，比如提示的时间和一些关于如何处理回调的信息

问题是，当我尝试迭代对象时，它会覆盖除最后一个之外的所有提示

var products = myVideo.products;
var video = Popcorn('#mainVideo');

    for (product in products){
        var obj   = products[product],
            start = obj.start,
            img   = obj.image,
            $targetDiv  = $("#"+obj.targetDiv);

        video.cue( start, function(){
            $('<img>', {
            class : "isImage",
            src : 'images/' + img
            }).prependTo( $targetDiv );
        })

    }

var products=myVideo.products；
var视频=爆米花（“#主视频”）；
用于（产品中的产品）{
var obj=产品[产品]，
start=obj.start，
img=obj.image，
$targetDiv=$（“#”+obj.targetDiv）；
video.cue（开始，函数（）{
$('
任何帮助都将不胜感激。
在此代码中，每个提示都有自己的回调函数，但每个函数都引用相同的变量
img
和相同的
$targetDiv
。当它们运行时，这些变量将被设置为
产品中最后一项的相应值

如果您曾经运行过代码并看到警告，请不要在循环中生成函数，这就是原因。一个好方法是将这些变量放入一个函数中，该函数立即被调用并返回另一个函数，即您的回调。如下所示：

function makeCallback(obj) {
    return function() {
        $('<img>', {
        class : "isImage",
        src : 'images/' + obj.img
        }).prependTo( $("#"+obj.targetDiv) );
    };
}

for (var product in products) {
    var obj = products[product];
    video.cue( obj.start, makeCallback( obj ) );
}

函数makeCallback（obj）{
返回函数（）{
$('
或者，您可以使用，它在引擎盖下做同样的事情。（Popcorn提供，它同时处理数组和对象。）

Popcorn.forEach（产品、功能（obj）{
video.cue（开始，函数（）{
$('
我应该注意到，这段代码中还有另一个问题，那就是每次通过提示点时，爆米花都会创建一个新图像。因此，如果用户跳回去重放一些视频，图像就会开始堆积。此外，图像直到可见时才开始加载，因此如果出现慢速播放，则会出现延迟h网络连接，图像可能不会显示，直到它太晚了

处理这些问题的最佳方法通常是提前创建图像，但是用CSS使它们不可见，然后让爆米花事件在正确的时间使它们可见。您可以考虑使用插件，这将为您完成大部分的重载。
Popcorn.forEach(products, function(obj) {
    video.cue( start, function(){
        $('<img>', {
        class : "isImage",
        src : 'images/' + obj.img
        }).prependTo( $("#"+obj.targetDiv) );
    });
});