Добавьте задержку в jquery для каждой функции после вызова ajax

ProgramBox

Добавьте задержку в jquery для каждой функции после вызова ajax

Post author:admin
Запись опубликована:1 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #xml #ajax

#javascript #jquery #HTML #xml #ajax

Вопрос:

У меня есть XML-документ (ниже):

 <?xml version="1.0" encoding="UTF-8"?>
<testimonials>
    <testimonial user="User Name 1" state="1" comment="Comment 1"></testimonial>
    <testimonial user="User Name 2" state="2" comment="Comment 2"></testimonial>
    <testimonial user="User Name 3" state="3" comment="Comment 3"></testimonial>
    <testimonial user="User Name 4" state="4" comment="Comment 4"></testimonial>
    <testimonial user="User Name 5" state="5" comment="Comment 5"></testimonial>
 </testimonials>

Я извлекаю эти данные с помощью вызова jQuery ajax. Теперь я хотел бы отобразить это в поле ( #xmlFeed ) и переходить к следующему узлу. Он должен отображаться, скажем, пару секунд, прежде чем перейти к следующему узлу, снова исчезая.

Ниже приведен мой код, который работает, но я просто не могу заставить цикл и затухание входить и выходить работать правильно. Код ниже:

 <!doctype html>
<html>
<head>
    <title></title>


</head>
<body>
    <div id="container">
        <div id="xmlFeed"></div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function(){

            //Initial load
            getXML();

        });

        getXML = function(){
            $.ajax({
                type: "GET",
                url: "xml/xmlFeed.xml",
                dataType: "xml",
                success: function(xml){

                    var data = $( xml );
                    var findTestis = data.find("testimonial");

                    findTestis.each(function(i){

                        name = this.getAttribute("user");
                        state = this.getAttribute("state");
                        comment = this.getAttribute("comment");

                        contents = "    <div id='listing"   i   "'>"
                                          "<p><strong>"   comment   "</strong></p>"
                                          "<p>"   name   ", "   state   "</p>"
                                          "</div>";

                        setTimeout(function(){
                            $("#xmlFeed").html(contents);
                        }, 2000 * i );

                    });

                }
            });
        }
    </script>
</body>

В настоящее время он работает и отображает, но снова и снова отображает содержимое последнего узла. Я предполагаю, что мне нужно обновить приращение или что-то в этом роде. Думайте об этом как о функции RSS sytle.

Спасибо за любую помощь, пожалуйста, приведите мне примеры.

1. Ребята, могу я попросить кого-нибудь изменить мой код, чтобы он работал так, как я хочу, пожалуйста. Мне это нужно как можно скорее, я ценю любую помощь, но это меня никуда не приводит.

2. ну, если мой ответ вам ничего не подсказал, почему бы вам просто не использовать свой собственный счетчик вместо того, чтобы полагаться на i.

Ответ №1:

«I» в вашей каждой функции, вероятно, относится к ключу, а не к индексу. Поскольку ваш объект является узлом, он, скорее всего, будет рассматривать его как карту. В этом случае ваш тайм-аут «2000 * i» не приведет к числовому значению (или 0), поэтому ваш последний узел всегда будет отображаться — все они выполняются одновременно, но в последовательном порядке.

смотрите пример:http://jsfiddle.net/nVdhf/2 /

и посмотрите разницу в их двух примерах array vs maphttp://api.jquery.com/jQuery.each /

Ответ №2:

Ваша проблема в том, что вы не ждете завершения первого тайм-аута, прежде чем перейти к следующему. Вам нужно каким-то образом перейти к следующему в обратном вызове метода setTimeout.

Ответ №3:

Я подозреваю, что происходит следующее:

вы перебираете содержимое XML-данных, создавая строку содержимого для каждого узла. Это, вероятно, займет пару сотен миллисекунд снаружи.
Ко времени выполнения вашего тайм-аута contents устанавливается значение последнего узла и $('#xmlFeed').html просто продолжает устанавливаться на это значение.

Что-то вродеhttp://jsfiddle.net/cori/PrVRc/1 / является подтверждением концепции того, что, я думаю, вы пытаетесь сделать (только слегка протестировано).

Ответ №4:

Разобрался сам и создал пользовательский плагин для загрузки. Спасибо за всю помощь, но все приведенные ответы были неактуальны. Кори, ты был ближе всего к цели, но все еще не совсем то, что я искал. Приветствия.

1. если вы собираетесь ответить на свой собственный вопрос, вам было бы полезно опубликовать, как вы решили проблему. Тем более, что два других пользователя проголосовали за ваш вопрос, очевидно, что есть другие люди, которые заинтересованы в конечном решении (включая меня).

2. Извините, в основном мне пришлось создать плагин, который задерживал бы ответ циклов. Я сделал это, используя метод setInterval. Мне не нужно было выполнять итерации с использованием индекса узлов xml. Без публикации кода это выглядит следующим образом: получите мне XML-файл и верните содержимое > найдите все необходимые атрибуты и назначьте их переменным > запустите цикл, используя пользовательскую функцию задержки jQuery each > в конце цикла установите время ожидания для повторного цикла, чтобы он постоянно выполнялся, вызывая функцию задержки each и устанавливая время задержки, умноженное на длину возвращаемых узлов xml.