Ways to implement a delay in a function?

Question

Ways to implement a delay in a function?

I'm looking for a way to introduce a delay in my function. Should I enclose the function within a delay function, or is there a different method to ensure that the animation doesn't trigger until 5 seconds after the page has loaded?

var textToType = "blablablabla";
var displayedText = "";

function typeText(fullString, currentlyTyped) {
    if (fullString.length != currentlyTyped.length) {
        currentlyTyped = fullString.substring(0, currentlyTyped.length + 1);
        document.getElementById("logoType").innerText = currentlyTyped;
        setTimeout(function() {
            typeText(fullString, currentlyTyped)
        }, 150);
    }
}

document.getElementById("logoType").innerHtml = textToType;
var element = document.createElement('h2');
element.innerHTML = textToType;
textToType = element.textContent;
typeText(textToType, displayedText);

<a class="navbar-brand" id="topper" href="#"><p id="logoType"></p></a>

javascript jquery html css

Answer 1

Answer №1

I believe the solution you are seeking is using the setTimeout function.

window.setTimeout(function () {
    type(typeThis, displayText);
}, 5000);

You can also incorporate this into a listener to determine when the window has completed loading:

window.addEventListener('load', function () {
    window.setTimeout(function () {
        type(typeThis, displayText);
    }, 5000);
});

Here's a complete example:

var typeThis = "blablablabla";
var displayText = "";

function type(fullString, typedSoFar) {
  if (fullString.length != typedSoFar.length) {
    typedSoFar = fullString.substring(0, typedSoFar.length + 1);
    document.getElementById("logoType").innerText = typedSoFar;
    setTimeout(function() {
      type(fullString, typedSoFar)
    }, 150);
  }
}

document.getElementById("logoType").innerHtml = typeThis;
var element = document.createElement('h2');
element.innerHTML = typeThis;
typeThis = element.textContent;

window.addEventListener('load', function() {
  window.setTimeout(function() {
    type(typeThis, displayText);
  }, 5000);
});

Waiting 5 seconds...
<a class="navbar-brand" id="topper" href="#"><p id="logoType"></p></a>

Answer 2

I believe the solution you are seeking is using the setTimeout function.

window.setTimeout(function () {
    type(typeThis, displayText);
}, 5000);

You can also incorporate this into a listener to determine when the window has completed loading:

window.addEventListener('load', function () {
    window.setTimeout(function () {
        type(typeThis, displayText);
    }, 5000);
});

Here's a complete example:

var typeThis = "blablablabla";
var displayText = "";

function type(fullString, typedSoFar) {
  if (fullString.length != typedSoFar.length) {
    typedSoFar = fullString.substring(0, typedSoFar.length + 1);
    document.getElementById("logoType").innerText = typedSoFar;
    setTimeout(function() {
      type(fullString, typedSoFar)
    }, 150);
  }
}

document.getElementById("logoType").innerHtml = typeThis;
var element = document.createElement('h2');
element.innerHTML = typeThis;
typeThis = element.textContent;

window.addEventListener('load', function() {
  window.setTimeout(function() {
    type(typeThis, displayText);
  }, 5000);
});

Waiting 5 seconds...
<a class="navbar-brand" id="topper" href="#"><p id="logoType"></p></a>

Answer 3

Answer №2

Instead of adding additional code to create a delay, a more effective approach would be to encapsulate everything in a Timeout function for better control: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Answer 4

Instead of adding additional code to create a delay, a more effective approach would be to encapsulate everything in a Timeout function for better control: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Answer 5

Answer №3

To incorporate a delay in your JavaScript code, utilize the setTimeout() function in this manner:

let delayID;

function delayedAction() {
  delayID = window.setTimeout(slowAction, 3000);
}

function slowAction() {
  console.log("Executing action after delay!");
}

function clearDelay() {
  window.clearTimeout(delayID);
}

Reference: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Answer 6

To incorporate a delay in your JavaScript code, utilize the setTimeout() function in this manner:

let delayID;

function delayedAction() {
  delayID = window.setTimeout(slowAction, 3000);
}

function slowAction() {
  console.log("Executing action after delay!");
}

function clearDelay() {
  window.clearTimeout(delayID);
}

Reference: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Ways to implement a delay in a function?

Answer №1

Answer №2

Answer №3

Similar questions

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

Switching out CSS files on the fly in ASP.NET

Which specific jQuery functionality was made visible?

Blog entries alternating between a pair of distinct hues

Retain the formatting of HTML while extracting the text

Designing CSS elements that flow from top to bottom, left to right, and extend to the right when overflowing

Shifting text higher to the <h1> tag using CSS

Manipulating a React table: Customizing a row in the table

Ways to avoid a bootstrap column from wrapping onto a new line when the parent width is decreased

Is it possible to implement CSS code from a server request into a React application?

Adding text after a div in React-JS using Bootstrap: A quick guide

Creating a JavaScript function for a custom timed traffic light sequence

Crafting a template for mixing up images and quotes without any specific connection - here's how!

Implementing an alert box upon redirect with PHP

Is it possible to upload numerous profiles into the MYSQL database using this WP template?

The jQuery call to a web service is returning XML data, but the success function is receiving a

Automatically generate nested object properties in VueJS for streamlining code structure

Changing the size of various types of images

Passing data between pages in Node.js

"Get a glimpse of the brackets image with real-time live