Javascript .each функция работает ненормально

Question

Javascript .each функция работает ненормально

0

У меня есть эта функция

function Overlap() {
setTimeout(function() {
    $(".overlap").each(function(index, object) {
        var image = $(this).prev().attr('src');
        target = $(object);
        var xmlhttp
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                xresponse = xmlhttp.responseText.split('-');
                $(target).children('a').attr('href', xresponse[0]);
                $(target).children('.name').html(xresponse[1]); //Set returned array appropriately
                $(target).children('.age').html(xresponse[2]);
                $(target).children('.specialization').html(xresponse[3]);
            }
        }
        xmlhttp.open('POST', 'factory/operational.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send('overlap=overlap&image=' + image);
    });
}, 1000);

}

Html:

<div class="Divbox" id="Box_three"><img src='<?php ?>' />
    <div class="overlap">
        <a href='' class='name'></a>
        <div class='age'></div>
        <div class='specialization'></div>
    </div>
</div>

И это вызвано этим

window.onload = Overlap();

На странице, которая его использует Проблема заключается в том, что функция работает. Обычно ее называют надлежащим образом, и я устанавливаю функции window.onload & setTimeout, чтобы убедиться, что страница загружается полностью, прежде чем пытаться захватить элемент.overlap. Теперь не так, когда наложено перекрытие, на странице находится около 48 элементов.overlap div, и все они отправляют этот запрос на страницу oper.php, но по прибытии обратно они не подходят должным образом, они подходят только на последний элемент, который возвращается из файла operating.php, может кто-то помочь мне найти правильный экземпляр селектора для передачи, чтобы убедиться, что каждый экземпляр перекрытия и есть дети, которые получают ответ

Subomi 12 май 2014, в 21:16

Источник

0

Какова ваша структура HTML?
Robin van Baalen 12 май 2014, в 18:22
2

Если ваша функция не window.onload = Overlap; с помощью window.onload = Overlap; вместо? Потому что в вашем случае функция запускается сразу, а не при загрузке страницы, как вы и предполагали; и вы устанавливаете window.onload для возвращаемого значения вашей функции.
Sunny Patel 12 май 2014, в 18:23
0

Если вы идете по этому пути (48 запросов ajax в секунду для каждого клиента кажется слишком большим ...), вы должны установить тайм-аут в функции успеха вашего вызова ajax вместо использования интервала, чтобы избежать дублирования запросов.
jeroen 12 май 2014, в 18:25
2

@plalx Этот вопрос никоим образом не является дубликатом этого вопроса. $ .each в jQuery использует замыкание, что позволяет избежать этой проблемы. Во всяком случае, он должен быть закрыт из-за опечатки.
Kevin B 12 май 2014, в 18:28
0

я хочу, чтобы func загрузился, как только страница будет готова, потому что, если он запустится раньше, он не найдет .overlap HTML-элемент для захвата
Subomi 12 май 2014, в 18:28
0

@ user3629623 Вот для чего предназначены события готовности к загрузке или загрузки окна. Но LaughDonor указал, почему это не работает. Исправьте это, и вам не понадобится setTimeout. Еще лучше, поскольку вы используете jQuery, $(function() { Overlap(); }) .
Jason P 12 май 2014, в 18:32
0

Ребята! ... это уже работает, проверьте ниже решение, я должен был положить var перед target = $ (object);
Subomi 12 май 2014, в 18:38
0

недурно мой вопрос для представителей ...;) ... спасибо всем .. + Кевин Б.
Subomi 12 май 2014, в 18:46
0

@KevinB Это точно такая же проблема цикла / замыкания. Все обратные вызовы закрывались по одной и той же глобальной target переменной.
plalx 12 май 2014, в 20:20

Показать ещё 7 комментариев

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Если ваша функция не window.onload = Overlap; с помощью window.onload = Overlap; вместо? Потому что в вашем случае функция запускается сразу, а не при загрузке страницы, как вы и предполагали; и вы устанавливаете window.onload для возвращаемого значения вашей функции.
Если вы идете по этому пути (48 запросов ajax в секунду для каждого клиента кажется слишком большим ...), вы должны установить тайм-аут в функции успеха вашего вызова ajax вместо использования интервала, чтобы избежать дублирования запросов.
@plalx Этот вопрос никоим образом не является дубликатом этого вопроса. $ .each в jQuery использует замыкание, что позволяет избежать этой проблемы. Во всяком случае, он должен быть закрыт из-за опечатки.
я хочу, чтобы func загрузился, как только страница будет готова, потому что, если он запустится раньше, он не найдет .overlap HTML-элемент для захвата
@ user3629623 Вот для чего предназначены события готовности к загрузке или загрузки окна. Но LaughDonor указал, почему это не работает. Исправьте это, и вам не понадобится setTimeout. Еще лучше, поскольку вы используете jQuery, $(function() { Overlap(); }) .
Ребята! ... это уже работает, проверьте ниже решение, я должен был положить var перед target = $ (object);
недурно мой вопрос для представителей ...;) ... спасибо всем .. + Кевин Б.
@KevinB Это точно такая же проблема цикла / замыкания. Все обратные вызовы закрывались по одной и той же глобальной target переменной.

Kevin B · Accepted Answer · 2014-05-12T17-20-00.000Z

вы пропустили объявление своей целевой переменной, сделав ее глобальной.

target = $(object);

должно быть

var target = $(object);

без var, каждая итерация цикла будет использовать одну и ту же target, что означает, что все запросы запроса xhr будут использовать одну и ту же цель.

Пример:

$.each(["a","b","c"], function(i,val) {
    x = val;
    console.log(x); // "a", "b", "c"
});
console.log(x); //"c"

После завершения каждого из них x будет глобальным var, который содержит значение из последней итерации. В вашем коде вы выполняете асинхронное действие на каждой итерации, то есть обратные вызовы для каждого действия будут выполняться после завершения каждого из них, поэтому target указывает на последнюю итерацию для всех обратных вызовов.

Супер правильно! .. я думаю, что это просто сработало! ... пожалуйста, объясните это дерьмо!
Я обновил его с базовым объяснением, этого достаточно? На самом деле не уверен, как это объяснить, кроме как указывать на код
не совсем достаточно ... мне кажется, что если бы var не существовал после того, как его экземпляр был бы создан навсегда, но каждая остановка на var означает новое создание?
@ user3629623 Если это решило вашу проблему, обязательно поставьте галочку под кнопками «вверх» и «вниз», чтобы вопрос выглядел «отвеченным» для всех остальных.