Динамическое Обновление CSS Происходит Слишком Часто

#javascript #jquery #css

Вопрос:

Таким образом, приведенный ниже код работает так, как задумывалось, за одним исключением. Код получает данные из API, кодирует данные с помощью jQuery, а затем каждые 1 секунду проверяет наличие новых данных. Часть кода, которая обновляет CSS, чтобы сделать отрицательные числа красными, а положительные-зелеными, работает, но она будет «мигать» каждые несколько секунд, прежде чем перейти от черного к зеленому или красному. Я предполагаю, что это происходит потому, что данные поступают каждую секунду, поэтому они мигают черным, а затем решают перейти на красный или зеленый.

До сих пор я пробовал оператор if/else, чтобы данные обновлялись только в том случае, если API дает новое значение, но это, похоже, не сработало. Любые мысли приветствуются, спасибо.

   coins.forEach(function(entry) {
    var name1 = entry.symname;
    var f = fullCGList.find(x => x.name === name1).id;
    var cgrequest = new XMLHttpRequest();
    var url1 = 'https://api.coingecko.com/api/v3/simple/price?ids=';
    var idc = f;
    var url2 = 'amp;vs_currencies=USDamp;include_market_cap=trueamp;include_24hr_vol=trueamp;include_24hr_change=true';
    cgrequest.open("GET", url1   idc   url2, true);
    cgrequest.send();
    cgrequest.onreadystatechange = function () {
    if (cgrequest.readyState == 4 amp;amp; cgrequest.status == 200) {
    var cgresponse = cgrequest.responseText;
    var cgobj = JSON.parse(cgresponse);
    var cgprice = (cgobj[f]['usd']);
    var fprice = ("$"   cgprice.toLocaleString('en-US', {minimumFractionDigits:2}));
    entry.price = fprice
    var cgchange = (cgobj[f]['usd_24h_change']);
    var fcgchange = (cgchange.toFixed(2)   "%");
    entry.change = fcgchange;
    console.log(entry);
  
    $(document).ready( function() {
      $('span.change').each(function() {
          var currency = $(this).html();
          var val = Number(currency.replace(/[^0-9.-] /g,""));
          if(val > 0) {
              $(this).addClass('positive');
          }
          if(val < 0) {
              $(this).addClass('negative');
          }
          })
      })
    
    
  };}})

  addToLocalStorage(coins);
}

$(document).ready(
  function() {
      setInterval(function() {
        updatePrices()
      }, 1000);
  });

 

Комментарии:

1. 1 секунда слишком коротка, добавление класса и повторная визуализация страницы браузерами стоят времени,

2. Просто чтобы убедиться, что я полностью понимаю, каждую секунду вы звоните гекко — я полагаю, что это настройка, чтобы звонить часто, когда цены меняются, так что это не проблема? Но он отправляет результаты обратно в черном цвете. Вы показываете, что оно отправлено обратно (функция onload), а затем меняете биты на красные или зеленые в зависимости от их значения? Не могли бы вы воздержаться от показа того, что он отправил обратно, пока вы не поменяете цвета? Это позволит обойти проблему изменения цвета на черный/красный или зеленый, но перекраска каждого элемента, скорее всего, все равно вызовет вспышку.

3. @AHaworth Я думаю, что это сработало, спасибо. Я просто создал отдельную функцию для определения цвета и переместил функцию, прежде чем показывать, что отправляется обратно… похоже, это решило проблему.

4. Хорошие новости, спасибо, что дали мне знать.