At the click of the button, content taking long to load

Asked

Viewed 116 times

1

At the click of the button sem fio bus the content to be shown has a delay of about 10 seconds, sometimes I have to make 5 clicks to show the information I want. How to get this delay?

index

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>TESTE DE FREIOS</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <button id='b1'>botao sem fio truck</button>
    <button id='b2'>botao sem fio bus</button>
    <button id='b3'>botao inicio/reiniciar</button>


    <div id='content'></div>

    <script src='lib/jquery.min.js'> </script>
    <script src='js/plc.js'> </script>
    <script src='js/pageManager.js'> </script>
    <script src='js/sensors.js'> </script>


</body>

</html>

js

const MAX_PAGES_TRUCK = 7;
const MAX_PAGES_BUS = 7;

var edge = false;

var page = {
    index: 0,
    line: '',
    path: ''
};

var pageConfig = {
    "bus": MAX_PAGES_BUS,
    "truck": MAX_PAGES_TRUCK
}

$(document).ready(function () {
    page.path = 'home';
    loadPage(page);
});

$('#b1').click(function () {
    button.truck = 1;
});

$('#b2').click(function () {
    button.bus = 1;
});

$('#b3').click(function () {
    window.location = '/';
});


var checkButtons = setInterval(function () {
    for (var station in button) {
        if (page.index == 0) {
            if (button[station]) {
                page.index = 1;
                page.line = station;
                loadPage(page);
            }
        } else {
            if (button[station] && page.line == station && !edge) {
                edge = true;
                page.index++;
                if (page.index > pageConfig[page.line]) {
                    page.line = '';
                    page.index = 0;
                }
                loadPage(page);
            }
        }
    }
}, 250);


function loadPage(page) {
    if (page.line == '' || !page.line) {
        $("#content").load('pages/home.html', function () {
            console.log('Carregando página inicial');
        });
        return;
    }
    $("#content").load('pages/' + page.line + '/' + page.index + '.html', function () {
        edge = false;
        page.path = page.line + '/' + page.index;
        console.log('Página: ' + page.line + ' ' + page.index + ' carregada');
    });

}

var parser = new DOMParser();
var plcDataText;
var plcDataValues;
var button = {
    "truck": 0,
    "bus": 0,
    "reserva_1": 0,
    "reserva_2": 0,
};
var sensors = [];

console.log('Carregando dados do PLC');

var getValuesInterval = setInterval(getIO, 250);

function getIO() {
    $.get('IO.html', function(data) {    
        plcDataValues = [];
        data = parser.parseFromString(data, 'text/html');
        plcDataText = $('.plc-data', data);
        for (var i = 0; i < plcDataText.length; i++) {        
            plcDataValues.push(plcDataText[i].innerHTML);
        }
        updatePLCValues();    
    });
}

function updatePLCValues() {
    button.truck = parseInt(plcDataValues[0])
    button.bus = parseInt(plcDataValues[1])
    button.reserva_1 = parseInt(plcDataValues[2])
    button.reserva_2 = parseInt(plcDataValues[3]) 
    sensors = [];
    for (var i = 4; i < plcDataValues.length; i++) {
        sensors.push(Math.round( parseFloat(plcDataValues[i]) * 1000) / 1000 );
    }
}


const MAX_SENSORS = 9;

var updateManometerInterval = setInterval( updateManometerValues, 500);

function  updateManometerValues() {
    for (var i=0; i < MAX_SENSORS; i++ ) {
        $('#sensor-' + (i + 1) ).val(sensors[i])
    }    
} 
  • Click events should not be assigned to the elements only when the DOM is fully loaded. That is, within the $(document).ready?

  • I’m gonna take this test now, hopefully that’s it

  • It wasn’t no, I posted the code in the wrong sequence, but it is configured pro dom call , then pro events , is that I posted all the js by all instead of separating how it is separated by files

  • Put your code as close to the real as possible.

1 answer

0


Gabriel Heming noted very well. I found that the positioning of the line "$(Document). ready(Function () {" was incorrect.

All code must be inserted within this structure. I ran a test with Jquery v3.2.1 and there was no delay.

https://jsfiddle.net/caiubyfreitas/0adahsr7/

  • Mark the answer as right.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.