DIR : /home/kozerus/public_html/ko/timers13.html

/home/kozerus/public_html/ko




<script>
// No magic numbers...

const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;

/**
 * Calculates the difference between two timestamps, returns a quadruple with
 * the difference in days, hours, minutes and seconds.
 *
 * @param {number} future
 */
const timestampDiff =
    future =>
    /** @param {number} past */
    past =>
        [DAY, HOUR, MINUTE, SECOND].map((time, index, times) => {
            const diff = future - past;
            const previousTime = times[index - 1];

            return (
                Math.floor(diff / time) -
                (Math.floor(diff / previousTime) * (previousTime / time) || 0)
            );
        });

/**
 * Start timer and set the content of the element.
 *
 * @param {string} date
 */
const timer =
    date =>
    /** @param {HTMLElement} target */
    target => {
        const diff = timestampDiff(Date.parse(date));

        return setInterval(() => {
            const [days, hours, minutes, seconds] = diff(Date.now());

            // Ideally we should have targets for every element
            // to avoid updating the entire innerHTML of the container with
            // every tick.
            target.innerHTML = `
                <div>${days}<span>Days</span></div>
                <div>${hours}<span>Hours</span></div>
                <div>${minutes}<span>Minutes</span></div>
                <div>${seconds}<span>Seconds</span></div>
            `;
        }, SECOND);
    };

// We finally run it (and we save the interval return value if we wan to stop it later)
const interval = timer("jun 12, 2022 01:30:00")(document.querySelector("#timer"));



/ Returns a function
const diff = timestampDiff(Date.parse("Aug 1, 2022, 10:00:00"));

// That we can reuse...
const diffWithNow = diff(DateNow());
const diffWithYesterday = diff(Date.parse("July 30, 2022, 10:00:00"));


const diff = future - now;

// The same floor 4 times
const totalDays = Math.floor(diff / DAY);
const totalHours = Math.floor(diff / HOUR);
const totalMinutes = Math.floor(diff / MINUTE);
const totalSeconds = Math.floor(diff / SECOND);

// The same logic 4 times again
const days = totalDays;
const hours = totalHours - totalDays * 24;
const minutes = totalMinutes - totalHours * 60;
const seconds = totalSeconds - totalMinutes * 60;

// And we return a quadruple (array with 4 values)
return [days, hours, minutes, seconds];


// `time` will have the value of every "time unit"
// `index` is self explanatory
// `times` is the original quadruple.
[DAY, HOUR, MINUTE, SECOND].map((time, index, times) => {
    // We save the diff between future and past to reuse it
    const diff = future - past;
    // We also save the previous time unit (if we are in HOUR, then is DAY
    // if we are in DAY then is `undefined`
    const previousTime = times[index - 1];

    // This is the logic that was repeated 4 times previously
    return (
        Math.floor(diff / time) -
        // This will return `NaN` for DAY, so we turn it into a `0`
        (Math.floor(diff / previousTime) * (previousTime / time) || 0)
    );
})


const intervals = arrayOfElements.map(timer("dec 31, 2022 00:00:00"));

// vs if it wasn't curried:

const intervals = arrayOfElements.map(element => timer(element, "dec 31, 2022 00:00:00"));
 let timerCount = null;

  useEffect(() => {
    timerCount = setInterval(() => {
      _countDown();
    }, 1000);
    return () => {
      clearInterval(timerCount);
    };
  }, []);




const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;

setInterval(() => {
    let diff = Date.parse("Oct 31, 2023 20:00:00") - Date.now();
    const days = Math.floor(diff / DAY);
    diff -= days * DAY;
    const hours = Math.floor(diff / HOUR);
    diff -= hours * HOUR;
    const mins = Math.floor(diff / MINUTE);
    diff -= mins * MINUTE;
    const secs = Math.floor(diff / SECOND);
    document.querySelector("#timer").innerHTML = `
        <div>${days}<span>Days</span></div>
        <div>${hours}<span>Hours</span></div>
        <div>${mins}<span>Minutes</span></div>
        <div>${secs}<span>Seconds</span></div>`;
}, SECOND);

	</script>


<script>
// create a function
function a() {
  console.log("Print me after every 1 minute.")
}
// execution the function after every 1000 milliseconds.
setInterval(a, 1000)

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)


setImmediate()

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)


</script>