Javascript Question posted in
A very good W3school tutorial can be found here.

how to run function in thread in typescript or Javascript

i want to run function in thread in typescript and this code before run must show loading element and run code after loading hide but not working , please help me
i use in async mode but not working , only run threadfunc and freeze screen

const RunInThread = async (threadfunc: any) => {
  const loading = document.querySelector('#loading')
  loading?.classList.remove('hidden')
  await threadfunc()
  loading?.classList.add('hidden')
}
Tags:

2

Answers


  1. 0

    You can use setTimeout to delay hiding the loading element.
    Here’s how you can modify your code to achieve that:

    const RunInThread = async (threadfunc) => {
  const loading = document.querySelector('#loading');
  
  if (loading) loading.classList.remove('hidden'); // Show the loading element
  
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  await threadfunc(); // run function
  
  if (loading) loading.classList.add('hidden'); // Hide the loading element
}

// Example:
const anyFunction = async () => {
  // Your function logic goes here
  console.log("Function running in 'thread'");
};

RunInThread(anyFunction);
    Login or Signup to reply.
  2. 0

    Well, since JavaScript is single-threaded by nature, functions in a separate thread in JavaScript or TypeScript could be a little weird.

    So, Basically, using Web Workers is like having a helper who can do some tasks for you in the background. While you’re doing your main stuff, the Web Worker can run separate bits of code without messing with your main work.

    Well, again, you can modify your RunInThread function to use a Web Worker and Main Thread:

    // worker.js

    onmessage = function(e) {
  const result = e.data(); // Here you are assuming e.data is a function passed to the worker
  postMessage(result);
}

    so your RunInThread function you can modify to use this worker.

    const runInThread = async (threadFunc: () => any) => {
  const loading = document.querySelector('#loading');
  loading?.classList.remove('hidden');

  const worker = new Worker('path/to/worker.js');

  worker.onmessage = function(e) {
    // Hide loading when the worker is done
    loading?.classList.add('hidden');
    worker.terminate();

    // Handle the result of the threadFunc here
    console.log('Result from worker:', e.data);
  };

  worker.onerror = function(error) {
    // Handle any errors that occur
    console.error('Worker error:', error);
    loading?.classList.add('hidden');
  };

  // Send data or instructions to the worker
  worker.postMessage(/* necessary data */);
}

// In worker.js
// Handle the received message and perform the task
onmessage = function(e) {
  const result = /* perform task with e.data */;
  postMessage(result);
};

    Main Thread: Handle all DOM-related operations, such as showing and hiding the loading element.

    Web Worker: Execute the heavy computation or processing task in the background.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search