Multiple Notifications SetInterval

Question

I have an ajax function which checks the database for a new notification every 30 seconds and play a notification sound when it finds a notification which is fine but the problem is that it gets the notification and plays the sound every time instead of only the first time it finds the notification, I am not sure how to use the setTimeout function to achieve this. I tried the localstorage get and set item method but to no avail... Any help would be greatly appreciated!

Here is the ajax function:

<script>
function show_notifications(){
   var command = "FETCH_NOTIFICATIONS";
    var user_id = "<?php echo $my_user_id; ?>";

    var alerted = localStorage.getItem('alerted') || '';

    $( document ).ready(function() {
        $.ajax({
            url: ajaxurl,
            cache: false,
            dataType: 'JSON',
            data: {action: 'update_db_ajax', command: command, user_id: user_id},
            success: function(result) {

                if(result.sql > 0) {
                $(".latest-notifications").remove();
                $("#notification_count").text(result.sql);
                $("#notification_count").removeClass('no-new-notifications');

                for(var i in result) {

                    if(result[i] > result[4]) {
                        console.log(result[i].id);

                        if (alerted != result[i].id) {
                            $('#chatAudio')[0].play();

                            iziToast.show({
                                message: result[i].notification_text,
                                messageColor: '#424242',
                                backgroundColor: '#fff',
                                theme: 'light',
                                animateInside: true,
                                layout: 1,
                                close: false,
                                position: 'bottomLeft',
                                timeout: 5000,
                                progressBar: false
                            });

                            localStorage.setItem('alerted', result[i].id);
                        }
                    }
                }

                    if(typeof result[4] == "undefined") {
                    } else {
                    if(result[4].is_viewed === 'NO') {

                        $(".latest-notifications-holder").append('<div class="latest-notifications">' + result[4].notification_text + ' <div class="notification-time"><abbr class="timeago" title="' + result[4].creation_date_time +'"></abbr></div> </div>');
                    } else if(result[4].is_viewed == 'YES') {
                       $(".latest-notifications-holder").text('No new notifications found.'); 
                    } 
                    }

                    if(typeof result[3] == "undefined") {
                    } else {
                    if(result[3].is_viewed === 'NO') {

                        $(".latest-notifications-holder").append('<div class="latest-notifications">' + result[3].notification_text + ' <div class="notification-time"><abbr class="timeago" title="' + result[3].creation_date_time +'"></abbr></div> </div>');
                    } else if(result[3].is_viewed == 'YES') {
                       $(".latest-notifications-holder").text('No new notifications found.'); 
                    }
                    }

                    if(typeof result[2] == "undefined") {
                    } else {
                    if(result[2].is_viewed === 'NO') {

                        $(".latest-notifications-holder").append('<div class="latest-notifications">' + result[2].notification_text + ' <div class="notification-time"><abbr class="timeago" title="' + result[2].creation_date_time +'"></abbr></div> </div>');
                    } else if(result[2].is_viewed == 'YES') {
                       $(".latest-notifications-holder").text('No new notifications found.'); 
                    }
                    }

                    if(typeof result[1] == "undefined") {
                    } else {
                    if(result[1].is_viewed === 'NO') {

                        $(".latest-notifications-holder").append('<div class="latest-notifications">' + result[1].notification_text + ' <div class="notification-time"><abbr class="timeago" title="' + result[1].creation_date_time +'"></abbr></div> </div>');
                    } else if(result[1].is_viewed == 'YES') {
                       $(".latest-notifications-holder").text('No new notifications found.'); 
                    }
                    }

                    if(typeof result[0] == "undefined") {
                    } else {
                    if(result[0].is_viewed === 'NO') {

                        $(".latest-notifications-holder").append('<div class="latest-notifications"><a href="<?php echo $post_url; ?>">' + result[0].notification_text + '</a> <div class="notification-time"><abbr class="timeago" title="' + result[0].creation_date_time +'"></abbr></div> </div>');
                    } else if(result[0].is_viewed == 'YES') {
                       $(".latest-notifications-holder").text('No new notifications found.'); 
                    }
                    }

                } else {
                    $("#notification_count").addClass('no-new-notifications');
                }
            },
            complete: function() {
                $('.timeago').timeago();
            }
        });
    });
} //function show_notifications

function startTimer(){
    //call show_notifications
    show_notifications();
    //then start interval
    setInterval(show_notifications, 30000);
} //function startTimer()

</script>

Answer 1

There's two approaches you may want to use here, depending on the notification behavior desired:

To notify each user any time there are new notifications:

1. You need to make sure your sql query returns the notifications in a sorted order (preferably with descending data timestamps) and includes a unique identifier/primary ID [PID] for the rows of data.
2. In your AJAX function, if the local storage value is set, it can be used to compare/traverse the returned dataset and ignore all records from that point on in the counting process (optionally you could truncate the data using that value, or update your sql query to accept it as an argument and search/filter for only those records that are newer).
3. After determining how many new notifications there are, store the PID of the first record (most recent record) in the returned dataset back to local storage for subsequent calls.

To notify only one admin user:

1. Add a boolean flag field on the database for each row which has already been acknowledged in the notification process.
2. Use this to filter the query used for the AJAX call.
3. Update the records returned in the AJAX call by setting the field.

You could add more boolean fields for multiple users/user types, but it would cause a lot of database bloat.