js：快速切换两个按钮“已读”和“未读”，停在“已读”但是未读的数据也显示出来了为什么

fury_123

于 2024-12-12 16:26:01 发布

阅读量125

点赞数 2

分类专栏： vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/kuang_nu/article/details/144429806

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

问：

if($(this).attr('tit') === 'undefined'){ reloadNotificationMessageList(0) } else if($(this).attr('tit') === 'readed'){ reloadNotificationMessageList(1) }这段代码有个问题，当我快速点击0和1进行切换的时候，由于已读信息太多接口返回时间过长，未读信息很少立刻就返回了，导致我快速来回切换后，虽然现在在未读信息列表，虽然现在没有未读信息，但是却同时显示了已读信息

回答：

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

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

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 请求