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>