javascript - 如何在另一个点击函数中覆盖 Ajax 成功数据

Question

您好，我正在创建一个通知。notification_call 是用于在铃铛图标上显示未读通知的功能

但我的问题是，一旦我单击通知，计数需要被覆盖并将其设为 0。

这是我的 notification_call 的 Java 脚本代码

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
                });
            }
        });
    });
}

我在 setinterval 中调用 notification_Call 来更新它

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

一旦用户使用此功能单击图标，我需要更改计数。但是我怎样才能在这里设置 data.count 0

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

});

Answer 1

单击重置图标时设置一个要标记的全局变量：

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

然后忽略之前发送的任何请求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
        // ...
      }
    })
    // ...
}