How can I override the Ajax success data inside another on click function

Question

Hello I am creating a notification.The notification_call is function that used to show the unreaded notifications on the bell icon

But my issues is once I click the notification the count needs to be override and make it as a 0.

Here is my Java script code for notification_call

var notification_call = function () {
    var url = $('.notification-content-div').data('href');
    blockUI = false
    Pace.ignore(function () {
        $.ajax({
            url: url,
            type: "GET",
            beforeSend: function (request) {
                var auth = localStorage.getItem("auth")
                if (auth) {
                    request.setRequestHeader("Authorization", "Token " + JSON.parse(auth));
                }
            },
            success: function (data) {
                $('.notification-count').attr('data-count', data.count);
                var raw = document.getElementById('notification-content-handlebar-div').innerHTML;
                var template = Handlebars.compile(raw);
                document.getElementById('notification-content-div').innerHTML = template({
                    data: data
                });
            }
        });
    });
}

I am calling the notification_Call in setinterval for updating it

notification_call();
var notification_interval = 10000;
setInterval(notification_call, notification_interval);

I need to change the count once the user click on the icon using this function . But how can I set the data.count 0 here

$(document).on('click', '.notification-icon', function () {

});

Answer 1

Set a global variable to mark when you click the reset icon:

let timestamp = 0
$(document).on('click', '.notification-icon', function () {
  timestamp = Date.now()
  // then set count to zero
})

Then ignore any request that is sended before timestamp :

var notification_call = function () {
    // ...
    // when the request if fired
    let timestamp_on_fire_request = Date.now()
    $.ajax({
      success: function (data) {
        // if it's fired before click, ignore it
        if (timestamp_on_fire_request < timesamp) return
        // ...
      }
    })
    // ...
}