Delay script with setTimeout()-CodePudding

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 ></div>

CodePudding user response：

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

Is this behaviour what you are looking for?