Блог

Я хочу пакетировать свои записи для загрузки, чтобы не создавать проблем с сервером. Я хотел бы иметь возможность отправлять 10 записей одновременно, каждые пять секунд, просто чтобы доказать концепцию на данный момент. Я поместил функции setInterval по всему своему коду, но не могу заставить его запускаться в нужное время. Я занимаюсь этим уже несколько дней, но не могу разобраться.

 chunkData(data) {
    const maxRecords = 10;
    const loops = (data.length % maxRecords > 0) ? Math.floor(data.length / maxRecords)   1 : data.length / maxRecords;
    //console.log('data: ', data);
    //console.log('loops: ', loops);

    //setInterval(() => {
        for (let loop = 0; loop < loops; loop  ) {
        console.log('loop: ', loop);
        let start = loop * maxRecords;
        //setInterval(() => {
          for (let batch = start; batch < start   maxRecords; batch  ) {
            // the line below will become the upload function once I get this to work
            if (data[batch] !== undefined) console.log('data[batch]: ', data[batch]);
          }
          //start = start   10;
        //}, 5000);
      }
    //}, 5000);
  }
  

Я уверен, что это простая настройка, которая мне нужна, но я понятия не имею, как это сделать прямо сейчас. Буду признателен за любые советы.

Большая проблема, с которой вам нужно будет разобраться, заключается в том, что изменение на стороне клиента в этом случае не поможет. Если вы пытаетесь таким образом помочь своему серверу, что происходит, когда одновременно загружается более 1 пользователя? 2? 3? 100? 1000? Это решение не масштабируемо. В конечном итоге (или очень быстро) вам нужно будет убедиться, что ваш сервер достаточно надежен для обработки трафика загрузки.

Что касается вашего конкретного кода. Ваша проблема в том, что вы используете setInterval внутри цикла for, но используете то же значение. Помните, что загрузка (или любой запрос XHR / fetch) является асинхронным действием. Прямо сейчас вы устанавливаете интервалы для выполнения в основном в одно и то же время.

Чтобы получить фактические интервалы между загрузками, вам понадобится что-то вроде этого:

 for (let loop = 0; loop < loops; loop  ) {
        console.log('loop: ', loop);
        let start = loop * maxRecords;
        
          for (let i=1, batch = start; batch < start   maxRecords; i  , batch  ) {
            // the line below will become the upload function once I get this to work
            if (data[batch] !== undefined) {
              
              setInterval(() => {
                //make upload request here
              }, (loop   1) * i * 5000);
            }
          }                  
      }  

Я не уверен, какой должна быть ваша переменная «start».

В любом случае, этот код действительно подвержен ошибкам и хрупок. Я действительно советую пересмотреть ваш подход и заняться исправлением вашей серверной части.

Если вы все еще хотите использовать этот клиентский хак, и даже если нет, и вы ищете более стабильное клиентское решение. Я советую использовать react-uploady. Он заботится о загрузке для вас и обо всех крайних случаях, связанных с управлением загрузками в React.

Вы даже можете легко устанавливать интервалы:

 import ChunkedUploady, { useChunkStartListener } from "@rpldy/chunked-uploady";
import UploadButton from "@rpldy/upload-button";

const CHUNK_SIZE = 1e 6;

const UploadButtonDelayedChunks = () => {
    useChunkStartListener(() => new Promise((resolve) => {
        //delays chunk upload by 5 seconds
        setTimeout(resolve, 5000);
    }));
    
    return <UploadButton/>;
};


export const ChunkedExample = () => {
    return (
      <ChunkedUploady
        destination={{ url: "https://my-server/upload" }}        
        chunkSize={CHUNK_SIZE}>
        <UploadButtonDelayedChunks/>
      </ChunkedUploady>
    );
};