jQuery Datatables add row problem , navigation not working

I am currently trying to reload the data via Datatables add row due to the sheer volume of data records. It's actually going quite well so far. Unfortunately, after about 30 seconds, that leaves the whole thing out so that the pages can no longer be scrolled and the navigation etc. in the header no longer work. It was almost the whole page to lag. I have to say that I'm still quite new to jQuery and that I needed some help for the code.

Maybe someone has an idea or can even tell me the solution why it fails or what the reason is and how I can get it solved.

Here is my code:

// begin first table
    trackeventsIO = $('#trackevents-table').DataTable({
        
        autoFill: {
            update: false,
        },
        
      responsive: true,

      // DOM Layout settings
      //dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",

      lengthMenu: [5, 10, 25, 50],

      pageLength: 15,
      orderable: true,
      order: [
        [0, "desc"]
      ],

      language: {
        'lengthMenu': 'Anzahl _MENU_',
      },
    });

    const trackevents = new Worker('templates/default/assets/js/worker/trackevents.js');

    var i = 0;

    trackevents.postMessage(sizeIO);

    setInterval(() => {

      const d = sizeIO.max - sizeIO.min;


      if (sizeIO.max == -1 || i < d) {
        console.log("Zähle  " + i + " -------- " + d);

        trackevents.postMessage(sizeIO, trackeventsIO);

        i = sizeIO.next;
      }
    }, 2000);

    //let renderIO = false;
    trackevents.addEventListener("message", (e) => {
      var dataIO = e.data;
      var row = dataIO.row;

      sizeIO = dataIO.size;
        // console.log(sizeIO);

      if (row) {
        trackeventsIO.row.add(
          [
            row.tID,
            row.tRec,
            row.tShipNumber,
            row.tShipDate,
            row.tShipStatusDescKurz,
            row.tShipStatusDesc
          ]
        ).draw();  // page, first, full-hold, true, false
          
        /* 
        if(sizeIO > 10 && renderIO != true) {
          trackeventsIO.page("first").draw();
          renderIO = true;
        }
        */ 
      }
    });