Невозможно добавить элемент в массив

Question

Я пытаюсь добавить элементы в массив, но я не могу его достичь. Если я не включаю «this.results.push (res)», результаты отображаются на моей странице html, но если включить это, то ничего не происходит! Вы можете помочь?

Это текущий код, который у меня есть:

var results = []; 

var fun1 = function(str1) { 

    var imag = new Image; 
    var starttimer = new Date().getTime(); 


    $(imag).attr('src', str1 + ':8886/').error(function() { 
     var endtimer = new Date().getTime(); 
     res = (endtimer - starttimer); 
     this.results.push(res); 
     $('#results').html("" + res + "ms"); 
    }); 
} 

Answer 1

Причина, по которой вам нужно использовать «results.push (res)» вместо «this.results.push (res)», является то, что контекст «это» изменился и не указывает на глобальную контекст больше (под которым определяется массив результатов). Вместо этого это указывает на элемент изображения, который вызвал событие ошибки. Также обратите внимание, что «этот» контекст «fun1» будет зависеть от вызывающего объекта. Если он вызывается в глобальной области видимости, тогда будут определены «this.results», иначе он будет неопределенным (в рамках fun1). Кроме того, это также зависит от того, определена ли функция в режиме «строгого» или «нестрогого».

Скажите, что у вас есть три разных элемента изображения и один и тот же обработчик событий во всех функциях, «это» будет отличаться во всех них. Фактически в каждой функции «это» будет соответствовать элемент DOM, который вызвал событие ошибки (image1, image2 или image3), так как Felix Kling уже писал по комментариям.

Кроме того, я хотел бы указать, что вы действительно можете иметь действительную функцию обработчика событий ошибки, в которой «this.results» будет работать. Для этого вам нужно будет вызвать функцию обработчика ошибок, используя методы «вызов», «применить» или «привязать», которые позволят вам изменить контекст этого внутри функции.

Вы могли бы сказать:

// define your onError event handler 
var onError = function() { 
    var endtimer = new Date().getTime(); 
    res = (endtimer - starttimer); 
    this.results.push(res); 
    $('#results').html("" + res + "ms"); 
}; 

// now call it this way 
$(imag).attr('src', str1 + ':8886/').error(onError.bind(this)); 

Конечно, таким образом, используя «это» вы не могли получить доступ к свойствам изображения в контексте этого изменилось (в вашем примере вы не используете свойство изображения, так что нет вред здесь).

Чтобы лучше понять глобальный контекст javascript и контекст функции, читайте больше на https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this.

Надеюсь, это поможет.

Answer 2

Вам нужно изменить:

this.results.push(res); 

к:

results.push(res); 

Answer 3

, когда вы включаете this.results.push(res); в программном коде браузера завешивает на этой строке и не продолжать выполнение последующих строк. this.results не определен в этой функции обратного вызова (проверьте строку состояния вашего браузера для уведомлений об исключениях). Когда вы удаляете эту строку, все работает отлично, и команда $('#results').html("" + res + "ms"); показывает данные в вашем html.

Использовать results.push(res); вместо this.results.push(res);, поскольку переменная results является глобальной и доступна для функции обратного вызова.