Simple Ajax to reload a DIV every 30 seconds

You should apply the desired range in a synchronous way, that is, call the newRequests() function only after Ajax returns. The way you're doing, you can overload your server and even crash the browser.

So, add a setTimeout() after Ajax returns within the function you want to call again.

Another thing is to separate the functions. Each function has its own application, and in this case, it is best to leave them separate.

Your code would look like this.

$(document).ready(function() {
    var $div_novospedidos = $('#div_novospedidos');
    $div_novospedidos.empty(); //Limpando a tabela
    newRequests();
});

function newRequests() {
    //$div_novospedidos.load("database3.php", function(data, status){
    $.get("database3.php", function(data, status) {
        var dados_pedido = data;
        const obj = dados_pedido;

        setTimeout("newRequests()", 30000);

        if (typeof dados != 'undefined') {
            alert("SEM PEDIDOS");
        } else {
            executa_new();
        }
    });
}

function executa_new() {
    try {
        var dados = JSON.parse(data);
        console.log(dados);
        $.each(dados, function(i, item) {
            numeroPedido = item.doc_number;
            nomeCliente = item.client_name;
            horarioPedido = item.clock;
            var newReq = $('<div class="panel panel-default col-6 col-lg-4 ">');
            var cols = "";
            cols += '<p>HORARIO: ' + horarioPedido + '</p></div>';
            cols += '<p>PEDIDO: ' + numeroPedido + '</p></div>';
            cols += '<p>Cliente: ' + nomeCliente + '</p></div>';
            newReq.append(cols);
            $("#div_novospedidos").append(newReq);
        });
    } catch (e) {
        if (typeof dados != 'undefined') {
            alert('Ocorreu um erro durante a chamada ' + e);
        } else {
            var zeroReq = $('<div class="panel panel-default col-6 col-lg-4 "><h1>SEM NOVOS PEDIDOS</h1>');
            $("#div_novospedidos").append(zeroReq);
        }
    }
}

You are using the function setTimeout which is a function that puts a maximum time of exception for a given function, so I understand that you want your function to be executed more than once, in this case the correct command is setInterval

Looking like this:

$(document).ready(function() {

    var $div_novospedidos = $('#div_novospedidos');
    $div_novospedidos.empty(); //Limpando a tabela
    //setTimeout(function(){ location.reload(); }, 30000);
    setInterval(newRequests(), 30000);


    function newRequests() {
        //$div_novospedidos.load("database3.php", function(data, status){
        $.get("database3.php", function(data, status) {
            var dados_pedido = data;
            const obj = dados_pedido;

            function executa_new() {
                try {
                    var dados = JSON.parse(data);
                    console.log(dados);
                    $.each(dados, function(i, item) {
                        numeroPedido = item.doc_number;
                        nomeCliente = item.client_name;
                        horarioPedido = item.clock;
                        var newReq = $('<div class="panel panel-default col-6 col-lg-4 ">');
                        var cols = "";
                        cols += '<p>HORARIO: ' + horarioPedido + '</p></div>';
                        cols += '<p>PEDIDO: ' + numeroPedido + '</p></div>';
                        cols += '<p>Cliente: ' + nomeCliente + '</p></div>';
                        newReq.append(cols);
                        $("#div_novospedidos").append(newReq);
                    });
                } catch (e) {
                    if (typeof dados != 'undefined') {
                        alert('Ocorreu um erro durante a chamada ' + e);
                    } else {
                        var zeroReq = $('<div class="panel panel-default col-6 col-lg-4 "><h1>SEM NOVOS PEDIDOS</h1>');
                        $("#div_novospedidos").append(zeroReq);
                    }
                }
            }
            if (typeof dados != 'undefined') {
                alert("SEM PEDIDOS");
            } else {
                executa_new();
            }
        });
    }

});

A little more about the functions:

They are two interesting functions of Javascript, with them we can define a time interval that an event will happen.

The syntax of the two functions is almost identical. What changes is how they act.

Syntax:

window.setTimeout('funcao()', intervalo_em_milisegundos);
window.setInterval('funcao()', intervalo_em_milisegundos);

The two functions will call a second function passed by parameter in the range also determined by parameter.

Since setTimeout () is calling the function once. While setInterval () calls the function "infinitely" always in the same time interval.

To pause the function, use clearInterval() . Passing the name of your range as a parameter.

Ex:

var intervalo = window.setInterval(lerolero, 1000);
function lerolero() {
    window.alert("Popup");
}
clearInterval(intervalo);

Source: link