Javascript - разрывы условного форматирования после перезагрузки элемента с использованием «.load» - PullRequest
Новая
       71

Javascript - разрывы условного форматирования после перезагрузки элемента с использованием «.load»

0 голосов
/ 01 мая 2020

Я очень плохо знаком с JavaScript / JQuery и у меня есть некоторые проблемы с тем, что должно быть простой функцией условного форматирования. Сама функция условного форматирования работает нормально, при начальной загрузке страницы; однако после выполнения перезагрузки элемента, настроенной на запуск каждые 60 секунд, он снова нарушает условное форматирование.

Вот JavaScript: 

$(document).ready(function(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
    });

var refreshTickers = setInterval(function () {
    $("#top-bar").load(location.href+" #top-bar>*","");
}, 60000);

Вероятно, стоит упомянуть, что это только ticker-item форматирование происходит неправильно после перезагрузки элемента. Форматирование carousel-item работает отлично. ticker-item s находятся внутри элемента #top-bar, тогда как carousel-item s - нет, поэтому для меня ясно, что проблема связана с элементом #top-bar в результате перезагрузки.

Я также попробовал приведенный ниже код, но безрезультатно: 

$(document).ready(function(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');    
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
    });

var refreshTickers = setInterval(function () {
    $("#top-bar").load(location.href+" #top-bar>*","");
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
}, 60000);

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

Как я уже сказал, я новичок в JS, и я ' искал везде решение этой проблемы. Я делаю что-то не так?

Если вам нужно что-то еще (например, HTML), пожалуйста, дайте мне знать.

Заранее спасибо за вашу помощь.

Ответы [ 2 ]

2 голосов
/ 01 мая 2020

если вы хотите, чтобы это делалось снова и снова, вы должны создать отдельную функцию для этого.

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


function reFormat(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
}

$(document).ready(function(){
   reFormat();

    var refreshTickers = setInterval(function () {
        $("#top-bar").load(location.href+" #top-bar>*", function(){
            reFormat();
        });
    }, 60000);
});
0 голосов
/ 01 мая 2020

Когда вы выполняете .load(), требуется go некоторое время, чтобы получить новые данные и вставить элементы в DOM. Тем не менее, последующий код Javascript не знает, что он должен ждать, пока .load() не завершит работу и не создаст новые элементы.

В форме временной шкалы в настоящее время происходит:

  1. вызов .load()
  2. поиск и стилизация любых присутствующих .ticker-item элементов
  3. данных, полученных от .load()
  4. создайте новые .ticker-item элементы DOM

Что вы хотите, чтобы произошло:

  1. вызов .load()
  2. ожидание данных полученный от .load()
  3. создание новых .ticker-item элементов DOM
  4. поиск и стилизация любых .ticker-item имеющихся элементов

Ответ Anees - это именно то, что вам нужно : объедините ваш код форматирования в одну функцию, а затем вызовите ее как функцию обратного вызова после завершения .load().

По мере продвижения в обучении JavaScript, проверьте Promises и async / await.

РЕДАКТИРОВАТЬ:

Там может по-прежнему У меня будет небольшая задержка между окончанием .load() и теми элементами, которые присутствуют в DOM.

Один из способов выяснить, так ли это, - добавить задержку перед вызовом reFormat() в обратном вызове: 

var elementCreationDelay = 500; // experiment with this duration

var refreshTickers = setInterval(function () {
  $("#top-bar").load(location.href+" #top-bar>*", function(){
    setTimeout(reFormat, elementCreationDelay);
}, 60000);
...