I was Inspired from the article by juliu.is and the program computing primes from 2 to the given upper limit.
I made a version where the lower limit is added and the computed primes are shown on the screen as juliu.is version does show only the total number of the found primes.
For some reason, Html.Lazy does not work in my version as it should change the background color without lag as the button is clicked, but it computes instead the primes again thus causing a visible lag.
Have I put Html.Lazy.lazy into an incorrect place of the code?
Is there something in my code preventing Html.Lazy to work?
Lazy works by comparing by reference. In the original example it compares 200000 to 200000. So this will be true as JS considers those the same. e.g. 200000 === 200000
You code uses function (getPrimes 200000 202280) even if the result is the same lazy doesn’t work with functions. You will need to store the result first in the model e.g. model.primes and then use that for lazy.
Html.Lazy.lazy works like any other function. It’s arguments are computed first before it is called.
You code Html.Lazy.lazy text (getPrimes 200000 202280) is computing getPrimes and passing the result to Html.Lazy.lazy. Html.Lazy.lazy will then compare this to the previous argument and call text if they’re different. text isn’t computationally intensive so this isn’t really useful.
Instead you want to do the getPrimes computation in the function that you pass to Html.Lazy.lazy
eg.
-- define a function that calls getPrimes and converts it in to text
getPrimesText min max = getPrimes min max |> text
-- call that function from `Html.Lazy.lazy2` with the two arguments
Html.Lazy.lazy2 getPrimesText 200000 202280