Присвоение значения в цикле for для события мыши

Question

Почему я всегда получаю последнее значение, присвоенное переменной хотя я уже вложил это в функцию?

Когда вызывается событие «вверх» и вызывается getGoogleFiles, вызывается последнее значение, присвоенное resourceId. Я не понимаю.

for ( var i in arrayObj) {
 var resourceId = arrayObj[i].ResourceId;
 entity_list.onmouseup = function(event) {
    parent.changeButtonState(this, event);
    (function(resourceId) {
        getGoogleFiles(resourceId);
    })(resourceId);
 }
}

Примечание: это отличается от других вопросов JavaScript, потому что onmouseup не запускается

Я следил за созданием другой функции, упомянутой здесь: Закрытие JavaScript внутри циклов - простой практический пример

for ( var i in arrayObj) {
 entity_list.onmouseup = function(event) {
  parent.changeButtonState(this, event);
  testing(arrayObj[i].ResourceId);
 }
}

function testing(index){
   return function() { getGoogleFiles(index); };
}

Но когда срабатывает элемент «entity_list», ничего не происходит. Я не могу использовать let, потому что конкретный браузер, который я использую, возвращает SyntaxError

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

Спасибо!

Answer 1

Вам нужно использовать testing() для создания функции слушателя, а не то, что вы вызываете внутри нее.

for (var i in arrayObj) {
  entity_list.onmouseup = testing(arrayObj[i].ResourceId, parent);
}

function testing(index, parent) {
  return function(event) {
    parent.changeButtonState(this, event);
    getGoogleFiles(index);
  };
}

Но вам не придется проходить через все это, если вы используете forEach() вместо for цикла, поскольку это создает новую область для obj в каждой итерации.

arrayObj.forEach(function(obj) {
  entity_list.onmouseup = function(event) {
    parent.changeButtonState(this, event);
    testing(obj.ResourceId);
  }
});

Answer 2

Здесь нельзя использовать переменную var scoped . Но вы можете присвоить resourceId атрибуту данных в относительном элементе html, чтобы вы могли прочитать его при возникновении события.

var arrayObj = [{ResourceId: "test1"}, {ResourceId: "test2"}, {ResourceId: "test3"}];

var entity_list = document.getElementsByClassName("entity_list");

for ( var i in arrayObj) {
 entity_list[i].dataset.resourceId = arrayObj[i].ResourceId;
 entity_list[i].onmouseup = function(event) {
    getGoogleFiles(this.dataset.resourceId);
 }
}

function getGoogleFiles(resourceId) {
  console.log(resourceId);
}

<span class="entity_list">entity list (item 1)</span>
<span class="entity_list">entity list (item 2)</span>
<span class="entity_list">entity list (item 3)</span>