не ждите, пока функция завершит запуск другой функции

Question

Здравствуйте. Я создаю этот скрипт, в котором я создаю запрос на публикацию, который добавляет товар в корзину и выбирает размер всего в бэкэнде.

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

Я не уверен, является ли это наиболее эффективным и быстрым методом (пожалуйста, дайте мне знать, если есть лучший способ), но я сделал, я создал слушателя на странице html / js и отправил сообщение из фона. Страница js, которая выполняет работу с той страницей js, которая прослушивает сообщение.

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

chrome.runtime.sendMessage({ carting: true, status: {
    status_item: (item[0]) //item name
} });

//carting code(irrelevant to this issue)

chrome.runtime.sendMessage({ carting: true, status: {
    status_color: (item[1]) //item color
} });

//more irrelevent carting code

chrome.runtime.sendMessage({ carting: true, status: {
    status_size: (size_text.text) // size
} });

вот что у меня было на странице слушателя:

chrome.runtime.onMessage.addListener(function(message, sender) {
    if (!message.carting) return;

    var Status = message.status;

    $(function() {

        $("#tasks_table").append('<tr>'
            +'<td>'+item+'</td>'
            +'<td>'+color+'</td>'
            +'<td>'+size+'</td>'
            +'</tr>'); 



    }
})

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

function waitForItem(item) {
    if (typeof item !== "undefined") {
         $("#tasks_table").append('<tr>'+'<td>'+item+'</td>');
        } else {
            setTimeout(waitForItem, 10);
        }
    }

function waitForColor(color) {
    if (typeof color !== "undefined") {
        $("#tasks_table").append('<td>'+color+'</td>');
        } else {
            setTimeout(waitForColor, 10);
        }
}

function waitForSize(size) {
    if (typeof size !== "undefined") {
        $("#tasks_table").append('<td>'+size+'</td>'+'</tr>');
        } else {
            setTimeout(waitForSize, 10);
        }
}
waitForItem(item);
waitForColor(color);
waitForSize(size);

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

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

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

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