1

При загрузки страницы в мой массив кладутся объекты взятые с другой страницы посредством ajax. Ради эксперимента я добавил в массив 200 случайных объектов, которые выводятся в родитель по определенным условиям. Если длина массива меньше 20, тогда функция срабатывает быстро. В случае с длиной массива в 200 объектов, всё происходит очень медленно (логично). Я пытаюсь сделать кнопку загрузить ещё.

Давайте посмотрим на код:

count = 0; // это цифра показывает с какого индекса массива начинать
count_to = 13; // это цифра говорит, что загружать нужно по 13 объектов

function load_next_orders() {
  for (count; count < count_to; count++) { // Начать с индекса 0, пока 0 меньше 13, нарастить

    kur = localStorage.user == 'k' && all_orders[count].order_k == localStorage.ID;
    gui = localStorage.user == 'g' && all_orders[count].order_g == localStorage.ID;
    sen = localStorage.user == 's' && all_orders[count].order_s == localStorage.ID;

    t_m = months[all_orders[count].order_date.split('/')[0]]; // преобразовываю дату из формата 12/12/2019 в 12 декабря (массива с месяцами в код не приложил )
    t_d = all_orders[count].order_date.split('/')[1]; // формат даты (см. выше строку)

    if (kur || gui || sen) {
      // all_orders - массив с объектами
      // all_orders[count].order_person - обращаюсь по индексу к массиву, где запираю key = value объекта
      orders.innerHTML +=
        '<div class="order ' + all_orders[count].order_status + '">' +
        '<p>' + all_orders[count].order_person + '</p>' +
        '<p>' + all_orders[count].order_price + '</p>' +
        '<p>' + all_orders[count].order_tel + '</p>' +
        '<p>' + all_orders[count].order_time + '</p>' +
        '<p>' + t_d + ' ' + t_m + '</p>' +
        '<p>' + all_orders[count].order_g + '</p>' +
        '<p>' + all_orders[count].order_s + '</p>' +
        '<div class="orderButtons">' +
        '<button dataset="' + all_orders[count].order_tel + '" class="change_status done">'
      '<button dataset="' + all_orders[count].order_tel + '" class="change_status nope">'
      '</div>'
      '</div>'
    }
    alert(count + '---' + count_to)
  }
}

load_next_orders(); // загружаю 13 записей (работает корректно)

getYet.addEventListener('click', load_next_orders); // а тут по клику ничего не происходит
// getYet - кнопка "показать еще"

Как я понимаю логику работы своего кода, мне необходимо по клику на кнопку нарастить count до 13, а count_to до 26 и так далее. Мне сложно было найти код пример в интернете, поэтому руководствуюсь собственной логикой.

Правильно ли я думаю? Почему не работает событие?

2
  • чему равен count по окончанию работы цикла for?
    – meine
    22 ноя 2019 в 11:35
  • @meine count равен 12 по окончанию цикла (да?) 22 ноя 2019 в 11:42

1 ответ 1

1

let count = 0;
let step = 10;
const container = document.querySelector('.container');
const more = document.querySelector('.more');

const load = () => {
  for (let i = 0; i < step; i++) {
    count++;
    container.innerHTML += count + '<br>';
  }
}

more.addEventListener('click', load, false);
<div class="container"></div>
<div class="more">more</div>

2
  • Спасибо, взял за основу идею из Вашего кода и сделал. Оказывается всё просто =) 22 ноя 2019 в 13:16
  • @this_learn_js, не за что, желаю успехов!
    – meine
    23 ноя 2019 в 9:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.