Delay script with setTimeout()

Question

I'm trying to display some data from google - the script below works for pulling the data - but I want to add a delay to it running so there's time for it to process the data when a change is made.

I've tried adding setTimeout() to the whole piece of code, but when I add it it turns back blank.

Any ideas?

https://codepen.io/jameswill77/pen/PoREWmK

const sheetId = '1Fa0SgniGrmW_0DCQriR6-XYj2eiRayTK_9HZG9BQYok';
const base = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?`;
const sheetName = 'sheet 1';
const query = encodeURIComponent('Select *')
const url = `${base}&sheet=${sheetName}&tq=${query}`
 
const data = []
document.addEventListener('DOMContentLoaded', init)
 
const output = document.querySelector('.output')

function init() {
    fetch(url)
        .then(res => res.text())
        .then(rep => {
            //Remove additional text and extract only JSON:
            const jsonData = JSON.parse(rep.substring(47).slice(0, -2));
            console.log(rep)
 
            const colz = [];
            const tr = document.createElement('tr');
            //Extract column labels
            jsonData.table.cols.forEach((heading) => {
                if (heading.label) {
                    let column = heading.label;
                    colz.push(column);
                    const th = document.createElement('th');
                    th.innerText = column;
                    tr.appendChild(th);
                }
            })
            output.appendChild(tr);
 
            //extract row data:
            jsonData.table.rows.forEach((rowData) => {
                const row = {};
                colz.forEach((ele, ind) => {
                    row[ele] = (rowData.c[ind] != null) ? rowData.c[ind].v : '';
                })
                data.push(row);
            })
            processRows(data);
        })
}


function processRows(json) {
    json.forEach((row) => {
 
        const tr = document.createElement('tr');
        const keys = Object.keys(row);
     
        keys.forEach((key) => {
            const td = document.createElement('td');
            td.textContent = row[key];
            tr.appendChild(td);
        })
        output.appendChild(tr);
    })
}

<div class="output"></div>

It could be due to how you've implemented `setTimeout`, which you've not included. Please see [mcve] - include all the relevant code to *demonstrate* the issue. — freedomn-m, Aug 02 '22 at 09:04
since this question is one vote away to be closed for lack of clarity, you should quickly add something more about the setTimeout you explained because it doesn't make much sense. That logic does not rely on any input that it's supposed to be ready before it runs and the only event you should care of there is dealing with the next task only when it's finished. — Diego D, Aug 02 '22 at 09:39

score 0 · Accepted Answer · answered Aug 02 '22 at 09:31

0

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(init, 3000);
});

Is this behaviour what you are looking for?

answered Aug 02 '22 at 09:31

Shrimp

472
3
9

Delay script with setTimeout()

1 Answers1