Categories
JavaScript Answers

How to control fps with requestAnimationFrame in JavaScript?

Sometimes, we want to control fps with requestAnimationFrame in JavaScript.

In this article, we’ll look at how to control fps with requestAnimationFrame in JavaScript.

How to control fps with requestAnimationFrame in JavaScript?

To control fps with requestAnimationFrame in JavaScript, we can use the setTimeout function.

For instance, we write

const fps = 25;
const animate = () => {
  // ...

  setTimeout(() => {
    requestAnimationFrame(animate);
  }, 1000 / fps);
};
animate();

to create the animate function that calls setTimeout with a callback that calls requestAnimationFrame with animate.

We control the fps by setting the delay for setTimeout to 1000 / fps.

The animation code is run before we setTimeout.

Conclusion

To control fps with requestAnimationFrame in JavaScript, we can use the setTimeout function.

Categories
JavaScript Answers

How to trim specific character from a string with JavaScript?

Sometimes, we want to trim specific character from a string with JavaScript.

In this article, we’ll look at how to trim specific character from a string with JavaScript.

How to trim specific character from a string with JavaScript?

To trim specific character from a string with JavaScript, we can use the string replace method.

For instance, we write

const x = "|f|oo||";
const y = x.replace(/^\|+|\|+$/g, "");

to call x.replace with a regex with the characters we want to match and replace them all with empty strings.

We use the g flag to find all matches in x.

Conclusion

To trim specific character from a string with JavaScript, we can use the string replace method.

Categories
JavaScript Answers

How to watch for checkbox change with JavaScript?

Sometimes, we want to watch for checkbox change with JavaScript.

In this article, we’ll look at how to watch for checkbox change with JavaScript.

How to watch for checkbox change with JavaScript?

To watch for checkbox change with JavaScript, we call addEventListener with 'change' on the checkbox input element.

For instance, we write

<input type="checkbox" />

to add a checkbox input.

Then we write

const checkbox = document.getElementById("myCheckbox");

checkbox.addEventListener("change", (event) => {
  if (event.currentTarget.checked) {
    alert("checked");
  } else {
    alert("not checked");
  }
});

to call addEventListener with 'change' and the change event handler callback to run the callback when we change the value of the checkbox.

In the callback, we use checked property to get the checked value of the checkbox.

Conclusion

To watch for checkbox change with JavaScript, we call addEventListener with 'change' on the checkbox input element.

Categories
JavaScript Answers

How to convert UNIX timestamp to calendar date moment.js and JavaScript?

Sometimes, we want to convert UNIX timestamp to calendar date moment.js and JavaScript.

In this article, we’ll look at how to convert UNIX timestamp to calendar date moment.js and JavaScript.

How to convert UNIX timestamp to calendar date moment.js and JavaScript?

To convert UNIX timestamp to calendar date moment.js and JavaScript, we call moment.unix with the timestamp in seconds and format.

For instance, we write

const dateString = moment.unix(value).format("MM/DD/YYYY");

to call moment.unix with the value UNIX timestamp number to parse it into a moment object.

Then we call format with "MM/DD/YYYY" to return a date string in MM/DD/YYYY format according to the timestamp value.

Conclusion

To convert UNIX timestamp to calendar date moment.js and JavaScript, we call moment.unix with the timestamp in seconds and format.

Categories
JavaScript Answers

How to split string on the first white space occurrence with JavaScript?

Sometimes, we want to split string on the first white space occurrence with JavaScript.

In this article, we’ll look at how to split string on the first white space occurrence with JavaScript.

How to split string on the first white space occurrence with JavaScript?

To split string on the first white space occurrence with JavaScript, we call string’s match method with a regex that match all whitespace characters that comes before other characters.

For instance, we write

const matches = str.match(/^(\S+)\s(.*)/).slice(1);

to call match with /^(\S+)\s(.*)/ to return an array with all the strings whitespace strings that comes after whitespaces.

And then we can get the non-whitespace substring that comes after the first whitespace substring by calling slice with 1.

Conclusion

To split string on the first white space occurrence with JavaScript, we call string’s match method with a regex that match all whitespace characters that comes before other characters.