JQuery хронометраж - желание добавить что-то похожее на DoEvents () в методе - PullRequest
Новая
       11

JQuery хронометраж - желание добавить что-то похожее на DoEvents () в методе

1 голос
/ 02 марта 2011

У меня есть таблица данных, которая содержит около 260 строк.Каждая из этих строк идентифицируется атрибутом, например parentHeaderName.При щелчке по заголовку этой таблицы у меня есть несколько jQuery, которые кратко меняют заголовок на изображение ajaxload.gif, например, 

$('#Header').html('<img src="images/ajaxload.gif"');

, а затем я переключаю все 260 строк, вызывая 

$([parentHeaderName=something]).toggle();

К сожалению, я не могу получить часть своего кода, которая меняет заголовок на ajaxload.gif для правильной работы.Как будто и этот оператор, и оператор toggle работают одновременно.Это означает, что пользователь никогда не видит ajaxload.gif.Единственный способ получить изображение для показа - это поместить предупреждающее сообщение («...») между двумя утверждениями.Очевидно, что это не желаемое решение.Я пытался использовать delay () и setTimeout безрезультатно.Я предполагаю, что мне нужен какой-то DoEvents-эквивалент в jQuery или javascript, который позволил бы изображению показываться до выполнения переключения.

Любые идеи?

Спасибо, Крис

ОБНОВЛЕНИЕ: Спасибо за отзывы людей.Вот фактический код: 

$('.sixdegreestypeheader').click(function() {
    var headerName = $(this).attr("headername");
    var jq = "[headername$=" + headerName + "]";
    var jq2 = "[parentheadername$=" + headerName + "]";

    var originalTextValue = $(jq).text();
    var originalHTMLValue = $(jq).html();

    if (originalHTMLValue.indexOf("collapse") == -1) {
        $(jq).html('<img src="images/collapse.gif" /> ' + originalTextValue);
    }
    else {
        $(jq).html('<img src="images/expand.gif" /> ' + originalTextValue);
    }

    // alert('break here to act as a DoEvents.') // this forces the image change... but I don't want to have to use an alert to force this
    $(jq2).toggle();

    return false;
});

(этот код на самом деле меняет заголовок на expand.gif или collapse.gif, а не ajaxload.gif.)

Я попробовал предложение по задержке 

$(jq2).delay(500).toggle();

но это не помогло никому.Когда количество строк, которые нужно переключить, невелико - скажем, примерно до 20 - нет проблем.Но в некоторых случаях мне нужно скрыть связку (например, 260), и браузеру нужно несколько секунд, чтобы пройтись по DOM, чтобы все скрыть.Вот почему я изначально надеялся использовать образ ajaxload.gif.

Спасибо, Крис

Ответы [ 2 ]

1 голос
/ 07 марта 2011

Спасибо за помощь всем.Как оказалось, проблема была больше в выражении toggle (), чем в чем-то еще..toggle () так много записей - это то, что заставило браузер немного зависать, независимо от того, что я делал в отношении .delay (), .when () и т. д. В итоге я сделал прямую .hide () и.show (), и эти изменения ускорили процесс до ожидаемого поведения.Чтобы определить текущую видимость (и, таким образом, узнать, должен ли я .hide () или .show ()), я проверил видимость первого сопоставленного элемента, например, $ (критерии: сначала: видимый), и действовал соответствующим образом.

Еще раз спасибо и всего наилучшего.

- Крис

0 голосов
/ 02 марта 2011

Моя первая мысль состоит в том, что это переключение происходит так быстро, что вам даже не нужен ajaxload.gif. Так что, если это так, то это хорошо, верно?

Моя вторая мысль заключается в том, как вы заменяете ajaxload.gif тем, каким был текст заголовка ... когда и как происходит этот обратный вызов?

Моя третья мысль заключается в том, что все происходит очень быстро, и это хорошо, но вы все равно хотите показать загрузчику, несмотря ни на что ... если это так, бросая задержку (500) или любое другое время в твою цепь, должен заставить его держаться. Я чувствую, что здесь задействовано больше кода, который вы не показывали, можете ли вы показать это?

Вот моя быстрая мысль попробовать в то же время .... 

$( function(){
    var header = $('#Header');
    header.bind('click', function(){
        $(this).html('<img src="images/ajaxload.gif">');
        $([parentHeaderName=something]).delay(500).toggle();
    });
});

Теперь это фактически заставит тумблер ждать перед запуском, так что, возможно, вы захотите поместить эту задержку в цепочку, которая происходит прямо перед тем, как вы снова замените ajaxload.gif текстом заголовка ....

Надеюсь, это каким-то образом помогло, иначе дайте мне больше информации, и я был бы рад еще взглянуть.

EDIT:

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

$.when( $('<img src="images/collapse.gif" />').load(), $('<img src="images/expand.gif" />').load() ).then( clickSetUp );

clickSetUp - ваша функция щелчка ...

Дайте ему попытку, я буду рядом :) 1021 *

...