Trigger function ONLY on threshold changes with continuously-updating variables?

I’m trying to make a simple local webpage (not for production, this is just a personal project) that changes image randomly from a set when I tilt my tablet past a threshold using HTML and Javascript. So far, I’ve got the accelerometer giving me continuously-updated values (which I’m assuming is necessary, else there may be problems detecting the tilt on time), and I can get it to partially work if I set static images instead of randomly-selected ones. Once I add the randomization in there, it falls apart.

I can’t figure out how to only make the randomize bit trigger on threshold changes. So far, it seems the proxy bit of code runs the display function every time the tablet tilt changes even a tiny bit (which is no different behavior than when I wasn’t using proxies), causing the images to flicker and flash between all possible images. I’ve tried a few different things, the most recent being using proxy to detect changes (but that doesn’t seem to work either).

It’s only for a small personal project, but I’ve been working at this for a few days now and still haven’t cracked it, so any input would be appreciated!

JS:

window.onload = function () {

    var displayImage = './resources/main.png';

    let main1 = './resources/main.png'
    let main2 = './resources/main2.png'
    let left1 = './resources/left.png'
    let left2 = './resources/left2.png'
    let right1 = './resources/right.png'
    let right2 = './resources/right2.png'
    let right3 = './resources/right3.png'
    let down1 = './resources/down.png'
    let down2 = './resources/down2.png'
    let down3 = './resources/down3.png'
    let up1 = './resources/up.png'
    let up2 = './resources/up2.png'

    let main = [main1, main2]
    let left = [left1, left2]
    let right = [right1, right2, right3]
    let down = [down1, down2, down3]
    let up = [up1, up2]

    const obj = {};
    const handler = {
        get(target, key) {
            if (typeof target[key] === "object" && target[key] !== null) {
                return new Proxy(target[key], handler)
            }
            return target[key]
        },
        set(target, prop, value) {
            console.log(target[prop], value)
            if (!target[prop]) {
                console.log('no target[prop]')
            } else if (target[prop] === value) {
                console.log('same value')
            } else {
                display(value);
            }
            target[prop] = value;
            return true;
        }
    }
    const tilt = new Proxy(obj, handler)

    function handleMotionEvent(event) {
        let x = event.accelerationIncludingGravity.x;
        let y = event.accelerationIncludingGravity.y;
        let z = event.accelerationIncludingGravity.z;

        if (-3 < x < 3 && -2 < z < 5) {
            tilt.pos = 'def'
        }
        if (x < -3 && -2 < z < 5) {
            tilt.pos = 'left'
        }
        if (x > 3 && -2 < z < 5) {
            tilt.pos = 'right'
        }
        if (-3 < x < 3 && z > 5) {
            tilt.pos = 'up'
        }
        if (-3 < x < 3 && z < -2) {
            tilt.pos = 'down'
        }
    }

    function display(value) {
        if (value === 'def') {
            displayImage = main[Math.floor(Math.random() * main.length)];
        }
        if (value === 'left') {
            displayImage = left[Math.floor(Math.random() * left.length)];
        }
        if (value === 'right') {
            displayImage = right[Math.floor(Math.random() * right.length)];
        }
        if (value === 'up') {
            displayImage = up[Math.floor(Math.random() * up.length)];
        }
        if (value === 'down') {
            displayImage = down[Math.floor(Math.random() * down.length)];
        }

        document.getElementById('displayimage').src = displayImage;
    }

    window.addEventListener("devicemotion", handleMotionEvent, true);

}