javascript - Javascript：在循环中分配点击事件

Question

我有一张地图，每两秒更新一次标记。我使用 3rd 方库显示特定标记处“某事”错误的 toast 消息。我希望地图居中并在单击 toast 时放大到特定标记。

对于单个标记，这一切都很好，但是当我有多个祝酒词时，它们最终都会显示最后一个标记（“某事”确实出错了）。我知道这是一个与 js 闭包和作用域相关的问题，但我无法找到解决它的方法。

if(/*something is wrong at marker*/) {
    if(toastShown.indexOf(i) == (-1))   // check if toast has been shown
    {
        toastShown.push(i);     // mark toast for current marker as shown
        var err = "Problem detected! Click to go to location";
        toastr.error(err, 'Error!', {timeOut: 10000});
        problemAtPoint.push(point);
        index++;
    }       
}

for( var j = 0; j < index; j++) {
    toastr.options.onclick = (function() {
        return function() {
            //alert('clicked!');
            map.setCenter(problemAtPoint[index]);
            map.setZoom(15);  
        }
    })(problemAtPoint[index]);
}

Answer 1

你必须考虑什么是 Javascript 闭包，看看这个https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

这个jsfiddle 展示了一个使用循环的例子

function setupHelp() {
    var helpText = [
        {'id': 'email', 'help': 'Your e-mail address'},
        {'id': 'name', 'help': 'Your full name'},
        {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

    for (var i = 0; i < helpText.length; i++) {
        var item = helpText[i];
        document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
    }
}

你的问题似乎是你没有使用闭包参数

toastr.options.onclick = 
    (function(ITEM) {
       return function() {
           //alert('clicked!');
           map.setCenter(ITEM);
           map.setZoom(15);  
       }
})(problemAtPoint[index]);