Question

The function down here get’s called every second,
it only never outputs:
console.log(“noise: “+noise);

So something goes wrong and i have no idea what or how to figure it out.

function readEye() {
    console.log("readEye");

    $.getJSON('output.json', function(data){
        faceDetected = data.faceDetected;
        frameCount = data.frameCount;
        noise = data.noise;
        console.log("noise: "+noise);
    });

    // show values in devPanel
    document.getElementById('faceDetected').innerHTML = "faceDetected: "+faceDetected;

}

Answer 1

You stumbled upon the “asynchronous trap”. $.getJSON() does NOT stop the normal program flow and will NOT wait until finished. So the following line document.getElementById('faceDetected').innerHTML = "faceDetected: "+faceDetected; will be called IMMEDIATELY with an undefined “faceDetected” variable. And this will happen every second, no matter if any of the previous requests ever finishes ….

Generally speaking you should only start a new timeout from inside the callback of an AJAX request. Additionally you should only work with those variables like “faceDetected” or “noise” inside the callback. So if you want to assign those values to a DOM element you should do it INSIDE the callback.