使用推送器处理分页列表 api 的实时数据？

Question

我有一个职位列表 API，它会向我提供每个职位已分派或未分派的状态，如果分派成功，它将显示已发送状态，默认情况下将处于待处理状态，因此我将收到一个通知下拉列表，其中包含加载更多功能或分页，因此每当已派遣工作，我想刷新列表 :

    channel.bind('App\\Events\\EmailStatusUpdated', function (data) { 
    // Call the API to refresh the list when a job's status is updated 
      refreshList(); call the refresh list api and set jobs 
    }); 
    
    const refreshList = async () => { 
      const response = await fetch('/api/email-notifications?page=1'); 
      const jobs = await response.json(); 
      setJobs(jobs.data); 
    };

这可行，但仍然会加载，因为这不是实时处理的

我们可以用这段代码来解决这个问题：

    channel.bind('App\\Events\\EmailStatusUpdated', function (data) { 
        setJobs((prevJobs) => { 
             return [data, ...prevJobs]; 
        }); 
    });

这只会在现有数组中弹出新的作业数据，这将实时显示数据，但是当我们有数千个作业时，这将失败，所有作业数组都将保存在内存中，这将导致内存泄漏和用户界面会滞后。我在互联网上没有找到任何合适的解决方案

那么我该如何处理这种显示实际实时数据而不是在现有数组中弹出新数据的场景？

如果你们感到困惑，请告诉我，以便我可以提供更多背景信息

我尝试谷歌搜索，每个人都说同样的事情，在现有数组中弹出新数据，或者在新数据到来时刷新列表，但是当您同时调度多个作业（例如数千个）时，这会失败。这不是可扩展的方法

Answer 1

为了高效地实时展示数据，可以考虑使用滑动窗口机制，或者尝试限制给定时间内存中的作业数量。