js:快速点击两个按钮,出现两个接口数据在同一个按钮下面同时显示的bug

问:

if($(this).attr('tit') === 'undefined'){

reloadNotificationMessageList(0)

} else if($(this).attr('tit') === 'readed'){

reloadNotificationMessageList(1)

}这段代码有个问题,当我快速点击0和1进行切换的时候,由于已读信息太多接口返回时间过长,未读信息很少立刻就返回了,导致我快速来回切换后,虽然现在在未读信息列表,虽然现在没有未读信息,但是却同时显示了已读信息

回答:

javascript 复制代码
你描述的问题是由于异步请求的延迟导致的。当你快速切换未读和已读消息列表时,请求的返回顺序可能会混乱,导致界面显示不正确的数据。

为了解决这个问题,你可以使用一个标志变量来跟踪当前请求的状态,并确保只有最新的请求结果会更新界面。以下是一个改进的示例代码:

let currentRequestType = null;
let currentRequestId = 0;

function reloadNotificationMessageList(type) {
    currentRequestId++;
    currentRequestType = type;
    const requestId = currentRequestId;

    // 模拟 AJAX 请求
    setTimeout(function() {
        if (requestId === currentRequestId) {
            if (type === 0) {
                // 处理未读消息
                console.log('显示未读消息');
            } else if (type === 1) {
                // 处理已读消息
                console.log('显示已读消息');
            }
        }
    }, Math.random() * 2000); // 随机延迟模拟网络请求
}

$(document).ready(function() {
    $('.notification-tab').on('click', function() {
        const tit = $(this).attr('tit');
        if (tit === 'undefined') {
            reloadNotificationMessageList(0);
        } else if (tit === 'readed') {
            reloadNotificationMessageList(1);
        }
    });
});

在这个示例中,我们引入了两个变量 `currentRequestType` 和 `currentRequestId`。每次调用 `reloadNotificationMessageList` 时,我们增加 `currentRequestId`,并将当前请求的类型存储在 `currentRequestType` 中。在请求完成时,我们检查请求的 ID 是否与当前请求的 ID 匹配,如果匹配,则更新界面。

这样可以确保只有最新的请求结果会更新界面,避免了快速切换时界面显示不正确的数据。

你可以根据实际情况调整代码,例如将模拟的 `setTimeout` 替换为实际的 AJAX 请求。
相关推荐
开-悟2 天前
嵌入式编程-使用AI查找BUG的启发
c语言·人工智能·嵌入式硬件·bug
一入JAVA毁终身2 天前
Data的时区格式BUG
bug
一入JAVA毁终身3 天前
处理Lombok的一个小BUG
java·开发语言·bug
SeaTunnel3 天前
SeaTunnel 社区月报(5-6 月):全新功能上线、Bug 大扫除、Merge 之星是谁?
大数据·开源·bug·数据集成·seatunnel
紫璨月3 天前
nginx反向代理的bug
运维·nginx·bug
从后端到QT3 天前
SRS流媒体服务器之本地测试rtc推流bug
bug·实时音视频
Java知识库14 天前
MySQL RC隔离级别惊现间隙锁:是bug吗?
数据库·mysql·bug
安卓机器14 天前
rom定制系列------红米note11 5G版 MTK芯片强解bl锁修复bug 官方系统 面具root批量线刷版
5g·bug
剽悍一小兔14 天前
一个小BUG引发的对Mybatis-Plus的模糊查询的思考
bug·mybatis
Gazer_S16 天前
【前端隐蔽 Bug 深度剖析:SVG 组件复用中的 ID 冲突陷阱】
前端·bug