Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Дергается бегущая строка (https://javascript.ru/forum/dom-window/40981-dergaetsya-begushhaya-stroka.html)

nikolaygrand 27.08.2013 08:50

Дергается бегущая строка
 
Здравствуйте. Возникла проблема следующего рода:
на сайте использую бегущую строку (библиотека в данном случае не имеет значения). Кроме того на сайте используются динамическое обновление данных через ajax. Обновление происходит ежесекундно. Фрагмент кода прилагаю ниже (обработка ответа от сервера). Возникла проблема: при обновлении данных происходит "дерганье" бегущей строки. Может кто-то подскажет как быть и можно ли что-то сделать, чтобы строка плавно двигалась?

for (key in data) {
          row = data[key];

          var  dohod_rub = (row.GrowthDaily * row.Price / 1000).toFixed(3),
            GrowthDaily = (row.GrowthDaily).toFixed(3);

          if ($("table.info-table").length > 0) {

            var portfel_data = getUserInfo('portfolio'),
              portfel_data_row;


            portfel_data_row = portfel_data[key];

            dohod_rub = portfel_data[key] != undefined ? (parseFloat(row.Price - portfel_data_row.AvgPrice) * parseFloat(portfel_data_row.Quantity)).toFixed(3) : 0;

            GrowthDaily = portfel_data[key] != undefined ? ((parseFloat(row.Price - portfel_data_row.AvgPrice) / portfel_data_row.AvgPrice) * 100).toFixed(3) : 0;

            if (portfel_data[key] != undefined)
              $(".data-sum-item-id_" + key).text((portfel_data_row.Quantity * row.Price).toFixed(3));
            else
              $(".data-sum-item-id_" + key).text(0);

          }

          if (parseFloat(GrowthDaily) < 0) {
            $(".doh-daily_" + key).removeClass("green-value").addClass("red-value").text(GrowthDaily);
            if ($(".doh-rub_" + key).length > 0) {
              $(".doh-rub_" + key).removeClass("green-value").addClass("red-value").text(dohod_rub);
            }
            $(".doh-daily_" + key).parent("div.up").addClass("red-value");

          } else {
            $(".doh-daily_" + key).removeClass("red-value").addClass("green-value").text("+"+GrowthDaily);
            if ($(".doh-rub_" + key).length > 0) {
              $(".doh-rub_" + key).removeClass("red-value").addClass("green-value").text("+"+dohod_rub);
            }
            $(".doh-daily_" + key).parent("div.up").removeClass("red-value");
          }

          if (parseFloat(row.GrowthMonthly) < 0) {
            $(".doh-month_" + key).removeClass("green-value").addClass("red-value");
            if ($(".doh-rub_" + key).is(":visible")) {
                $(".doh-month_" + key).text((row.GrowthMonthly * row.Price / 1000).toFixed(3));
            }
            else  {
                 $(".doh-month_" + key).text(row.GrowthMonthly);
            }

          } else {
            $(".doh-month_" + key).removeClass("red-value").addClass("green-value");
            if ($(".doh-rub_" + key).is(":visible")) {
               $(".doh-month_" + key).text("+" + (row.GrowthMonthly* row.Price / 1000).toFixed(3));
            }
            else {
               $(".doh-month_" + key).text("+" + row.GrowthMonthly);
            }
          }

          if (parseFloat(row.GrowthYearly) < 0) {
            $(".doh-year_" + key).removeClass("green-value").addClass("red-value");
            if ($(".doh-rub_" + key).is(":visible")) {
               $(".doh-year_" + key).text((row.GrowthYearly* row.Price / 1000).toFixed(3));
            }
            else {
              $(".doh-year_" + key).text(row.GrowthYearly);
            }
          } else {
            $(".doh-year_" + key).removeClass("red-value").addClass("green-value");
            if ($(".doh-rub_" + key).is(":visible")) {
                 $(".doh-year_" + key).text("+" + (row.GrowthYearly* row.Price / 1000).toFixed(3));
            }
            else {
                $(".doh-year_" + key).text("+" + row.GrowthYearly);
            }
          }

          if (parseFloat(row.Price) < 0) {
             $(".price-cell_" + key).addClass("red-value").text((row.Price).toFixed(3));
          } else {
             $(".price-cell_" + key).removeClass("red-value").text((row.Price).toFixed(3));
          }

        }

ksa 27.08.2013 09:58

Цитата:

Сообщение от nikolaygrand
при обновлении данных происходит "дерганье" бегущей строки. Может кто-то подскажет как быть и можно ли что-то сделать, чтобы строка плавно двигалась?

Браузер видно занят и не рисует ту строку...

nikolaygrand 27.08.2013 11:50

А чем например он может быть занят?

Kvark 27.08.2013 13:23

ммм обработкой ajax запроса может?

ksa 27.08.2013 13:41

Цитата:

Сообщение от nikolaygrand
А чем например он может быть занят?

Да много чем... Сам же писал
Цитата:

Сообщение от nikolaygrand
при обновлении данных

...

Помимо этого еще может какие дела нашел...
Браузер ведь не обещает работу в реальном времени...

nikolaygrand 27.08.2013 13:43

Цитата:

Сообщение от ksa (Сообщение 269497)
Браузер видно занят и не рисует ту строку...

Я просто проверял, если обновление убрать и отображать статику, то дерганья не будет, но если что-то на странице динамически обновляется в режиме реального времени происходит такой вот эффект.

Вообще подскажите реально ли реализовать бегущую строку на странице с динамически обновляемым контентом? Я вот пробовал - не получилось, а заказчик требует :).

ksa 27.08.2013 13:49

Цитата:

Сообщение от nikolaygrand
режиме реального времени происходит такой вот эффект

Повторюсь... Браузер не является приложением "реального времени"... Т.е. он оставляет за собой право заняться чем-то кроме твоей пргораммы.

Цитата:

Сообщение от nikolaygrand
реально ли реализовать бегущую строку на странице с динамически обновляемым контентом?

Так у тебя есть же уже что-то "бегущее". :)
А "дерганье" тебе еще и OS может добавить.


Часовой пояс GMT +3, время: 13:04.