pure javascript, lazy loading of static array

Question

I am new to java script.

I have an array with the first 10000 values for factorials, in the form of strings. (1-10000). I have it in an array as part of a function.

<!DOCTYPE html>
<html>
<body>
<p>Provide input number, then click on accept. Textbiox value will change to appropriate value.</p>
Name: <input type="text" id="myText" value="Mickey">

<button onclick="myFunction()">accept</button>

<script>
function myFunction() {
var values = ["1",
"2",
"6",
"24",
"120",
"720",
"5040",
"40320",
"362880",
"3628800",
"39916800",...

Now, it takes about 20 seconds to load that website, I wanted to know how I can speed that up.

Lazy loading is the feature I am after, but all of them are sequences/functions that generate array values on the go, or image arrays, loading images from somewhere else.

How can I apply lazy loading to a static array? thank you.

CertainPerformance · Accepted Answer · 2021-05-23 04:35:43Z

2

I'd generate the values when requested instead. If you're worried about performance, you can make a cache so as not to re-calculate values already found.

const factorials = new Map();
document.querySelector('button').addEventListener('click', () => {
  const val = Number(document.querySelector('#myText').value);
  if (!val || !Number.isInteger(val) || val < 0) return console.log('bad input...');
  console.log(String(getFactorial(BigInt(val))));
});
const getFactorial = (n) => {
  if (factorials.has(n)) return factorials.get(n);
  if (n === 1n) return 1n;
  const fact = getFactorial(n - 1n) * n;
  factorials.set(n, fact);
  return fact;
};

<input type="text" id="myText" value="5">

<button>accept</button>

answered May 23, 2021 at 4:35

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pixelcreated Over a year ago

What about something as simple as running the script at server? Generally speaking, running at server will significantly speed up the process.

CertainPerformance Over a year ago

Sure, if one happens to have control over server-side code, that'd be fine too - but calculating up to 9999! is very easy for modern hardware

Barny Over a year ago

thank you for the quick reply, I wish to expand this array later on, where a single value will indeed take in the order of minutes to calculate, your solution only works while the number of values is small. Is there a way to implement lazy loading for a static array?

CertainPerformance Over a year ago

@Barny If you cannot calculate it on the client, and if the payload data would be too large to send in the initial HTML response, putting it on the server is the right way to go. Put the list on the server, and when the user clicks, make a request and have the server send them the associated result.

Collectives™ on Stack Overflow

pure javascript, lazy loading of static array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related