Author: John Au-Yeung

Sometimes, we want to call a JavaScript function every 5 seconds continuously.

In this article, we’ll look at how to call a JavaScript function every 5 seconds continuously.

How to call a JavaScript function every 5 seconds continuously?

To call a JavaScript function every 5 seconds continuously, we call setInterval with the function that we want to run and the interval between runs.

For instance, we write

const interval = setInterval(() => {
  // ...
}, 5000);

clearInterval(interval);

to call setInterval with the callback we want to run and 5000 millisecond period.

Then the callback runs every 5 seconds.

Conclusion

To call a JavaScript function every 5 seconds continuously, we call setInterval with the function that we want to run and the interval between runs.

Sometimes, we want to shorten conditional statements with JavaScript.

In this article, we’ll look at how to shorten conditional statements with JavaScript.

How to shorten conditional statements with JavaScript?

To shorten conditional statements with JavaScript, we can use the array includes method.

For instance, instead of writing

if (test.type == 1 || test.type == 2 || test.type == 3 || test.type == 4) {
  // do something.
}

We can shorten that to

if ([1, 2, 3, 4].includes(test.type)) {
  // do something
}

We check if at least one of 1, 2, 3, and 4 are set as the value of test.type with

test.type == 1 || test.type == 2 || test.type == 3 || test.type == 4

or

[1, 2, 3, 4].includes(test.type)

Sometimes, we want to add upload progress indicators for fetch.

In this article, we’ll look at how to add upload progress indicators for fetch.

How to add upload progress indicators for fetch?

To add upload progress indicators for fetch, we replace fetch with axios.

To install it, we run

npm i axios

Then we use it by writing

const data = await axios.request({
  method: "post",
  url,
  data: myData,
  onUploadProgress: (p) => {
    console.log(p, p.loaded / p.total);
  },
});

in an async function to make a post request.

We add the onUploadProgress method in the object we call axios.request with to get the progress of our request.

p.loaded has the number of bytes and p.total has the total number of bytes for the request that needs to be sent.

Conclusion

To add upload progress indicators for fetch, we replace fetch with axios.

Sometimes, we want to get notified when an element is added to the page with JavaScript.

In this article, we’ll look at how to get notified when an element is added to the page with JavaScript.

How to get notified when an element is added to the page with JavaScript?

To get notified when an element is added to the page with JavaScript, we can use the MutationObserver constructor.

For instance, we write

const observerConfig = {
  attributes: true,
  childList: true,
  characterData: true,
};

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.type);
  });
  resolve(mutations);
});
observer.observe(targetNode, observerConfig);

to create a MutationObserver with a callback that runs when the DOM changes.

And we call observer with the targetNode DOM node object and the observerConfig object.

In observerConfig we set attributes, childList, and characterData to true to watch for changes in node attributes, node add or remove, and character data changes.

Conclusion

To get notified when an element is added to the page with JavaScript, we can use the MutationObserver constructor.