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

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

Alternative form for non-javascript browsers in the absence of script

Implementing div elements in a carousel of images

Having trouble converting JSON object to regular object?

having difficulty uploading an image on wampserver

Clearing the ng-model value in a controller following an ng-change event

EJS not displaying object values properly

undefined reference to $

What is the best way to utilize AJAX to send a value from a foreach loop in Laravel?

Enhancing navigation functionality using CSS

What could be the reason behind the malfunctioning of my media query in the

unable to reset contact form functionality

The Node.js server is outputting an HTTP status code of 404

What might be the reason for the absence of post data when sending it to a CodeIgniter controller through ajax

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

Display the Image Element in Angular only when the image actually exists

Creating a Conditional Structure in HTML: A Step-by-Step Guide

Tips for customizing the font color in Material UI Typography

Coordinate the execution of two AJAX jQuery functions

Unable to apply the flex-grow property to a column flex box that has a specified minimum height