调用返回 setTimeOut 回调 javascript 的回调 function

Question

I tried searching for this, but was unable to find something that matched the case I needed.

I have this function here that can't be modified:

function generate() {
  const delay = 7000 + Math.random() * 7000;
  const num = Math.random();

  return (callback) => {
    setTimeout(() => {
      callback(num);
    }, delay);
  };
}

When I try to call the function like generate() I get an error. I've also tried using a promise based approach like:

    const result = await generate();
    return result;

But when I do that the result that is returned is a promise, which I can't render into JSX (I'm using React).

JSX component code (For debugging purposes currently):

const Test = () => { 
return <>{generate()}</>;
};

I would appreciate any suggestions here. Thanks!

Answer 1

This in no way is to solve your problem, but only to understand this logic. Maybe it can help in solving the problem.

generate() in this case returns a function that sets the timeout.

   typeof generate() = "function"
  // this is then the function we use to run the long running function

  const generateFunction = generate();

  //we then create the callback handler function
  const callback = () =>  {...}
  //when executed it will set the timeout to the random delay and display the result in your component of oyur choice.
  generateFunction(callback);

fiddle