• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How can I add delay to this js function?

chrisj

Legendary Coder
Upon page loads this js displays successfully.
I'd like to add a delay X seconds after page load.

This is the working code:

JavaScript:
!function($){$.fn.scramble=function(t,e,n,i){("number"!=typeof t||NaN===t||t<1e3||t>2e4)&&(t=3e3),("number"!=typeof e||NaN===e||e<5||e>1e3)&&(e=20);var r={numbers:["1","0"],alphabet:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],punctuation:["@","#","$","%","^","*","(",")","&","+","=","}","{","|",":",";",">","<","?","~"," "],get alphanumeric(){return this.numbers.concat(this.alphabet)},get all(){return this.alphanumeric.concat(this.punctuation)}};void 0!==n&&n in r||(n="all"),n=r[n],i=void 0!==i&&i!==!1;var a=this.text();this.text("");var s=function(t){var e=t.length,n=Math.floor(Math.random()*e),r=t[n];return i?r.toUpperCase():r},o=function(t,e,n){var i=e.slice(0,n);return i=i.join(""),t.splice(0,i.length,i)},h=function(t){for(var e=[],i=0;i<t;i++)e.push(s(n));return e},c=function(n,i){this.iteration=0,this.spliceIteration=0,this.$element=n,this.word=i,this.len=i.length,this.arr=i.split("");var r=parseInt(t/e/this.len);this.scramble=function(t){this.iteration+=1;var e=h(this.len);this.iteration%r===0&&(this.spliceIteration+=1),o(e,this.arr,this.spliceIteration);var n=e.join("");this.$element.text(n),this.spliceIteration===this.len&&window.clearInterval(t)}},l=new c(this,a),u=window.setInterval(function(){l.scramble(u)},e);return this}}(jQuery);

function runAnimation() {

   jQuery('#text').addClass('pre-animation');
  jQuery('#text').scramble(3000, 50, "punctuation", true);

  jQuery('#text').append('<span class="after">.</span>');
   jQuery('#text').removeClass( 'pre-animation' ).addClass('post-animation');
}

function runNext() {
   jQuery('#text').append( "<span>.</span>" );
}

runAnimation();


I tried adding this, without success:

JavaScript:
window.onload = function(){
 setTimeout(function(){ 6000);
};

Any assistance is much appreciated
 
Last edited:

Johna

HTML, CSS and JS Coder
Staff Team
Guardian
I tried adding this, without success:

JavaScript:
Code:
window.onload = function(){
 setTimeout(function(){ 6000);
};

Try this:
  1. First make your whole JS one function like this:
    JavaScript:
    function runAfterDelay() {     /*I named the function "runAfterDelay", but you can name it whatever you like*/
    
    
      !function($){$.fn.scramble=function(t,e,n,i){("number"!=typeof t||NaN===t||t<1e3||t>2e4)&&(t=3e3),("number"!=typeof e||NaN===e||e<5||e>1e3)&&(e=20);var r={numbers:["1","0"],alphabet:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],punctuation:["@","#","$","%","^","*","(",")","&","+","=","}","{","|",":",";",">","<","?","~"," "],get alphanumeric(){return this.numbers.concat(this.alphabet)},get all(){return this.alphanumeric.concat(this.punctuation)}};void 0!==n&&n in r||(n="all"),n=r[n],i=void 0!==i&&i!==!1;var a=this.text();this.text("");var s=function(t){var e=t.length,n=Math.floor(Math.random()*e),r=t[n];return i?r.toUpperCase():r},o=function(t,e,n){var i=e.slice(0,n);return i=i.join(""),t.splice(0,i.length,i)},h=function(t){for(var e=[],i=0;i<t;i++)e.push(s(n));return e},c=function(n,i){this.iteration=0,this.spliceIteration=0,this.$element=n,this.word=i,this.len=i.length,this.arr=i.split("");var r=parseInt(t/e/this.len);this.scramble=function(t){this.iteration+=1;var e=h(this.len);this.iteration%r===0&&(this.spliceIteration+=1),o(e,this.arr,this.spliceIteration);var n=e.join("");this.$element.text(n),this.spliceIteration===this.len&&window.clearInterval(t)}},l=new c(this,a),u=window.setInterval(function(){l.scramble(u)},e);return this}}(jQuery);
    
      function runAnimation() {
    
        jQuery('#text').addClass('pre-animation');
        jQuery('#text').scramble(3000, 50, "punctuation", true);
    
        jQuery('#text').append('<span class="after">.</span>');
        jQuery('#text').removeClass( 'pre-animation' ).addClass('post-animation');
      }
    
      function runNext() {
        jQuery('#text').append( "<span>.</span>" );
      }
    
      runAnimation();
    
    
    }
  2. And then after the function you've just made add this:
    JavaScript:
    setTimeout(function () {
      runAfterDelay();     //remember to change this if you renamed the function
    }, 6000);
 

chrisj

Legendary Coder
That's great. Thank you.
What I want, and didn't clarify, is that I'd like the animation to appear at delay time.
Currently, with your code (thanks again) the text displays on page load and then the animation runs successfully at the delay time: 6000.
How can the text not appear until 6000?

The css is:

CSS:
:root {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

div {
  font-family: arial;
  font-weight: 700;
  font-size: 5vw;
  &.animating {
    color: $animating;
  }
}

span {

  .pre-animation & {
    opacity: 0;
  }
}

.after {
  opacity: 0;
  transition: all 1s ease;

  .post-animation & {
    opacity: 1;
  }
}

I look forward to any guidance.
 
Last edited:

Johna

HTML, CSS and JS Coder
Staff Team
Guardian
Then add display: none; to the div's CSS, and then add document.getElementsByTagName("div").style.display = "block"; to the setTimeout to make this:
JavaScript:
setTimeout(function () {
  runAfterDelay();
  document.getElementsByTagName("div").style.display = "block";
}, 6000);


Edit: I think it'll be better to use visibility = "hidden". So like this instead:
JavaScript:
setTimeout(function () {
  runAfterDelay();
  document.getElementsByTagName("div").style.visibility = "hidden";
}, 6000);
 

chrisj

Legendary Coder
Much thanks again, but neither of your suggestions worked successfully.
Adding:
JavaScript:
document.getElementsByTagName("div").style.display = "block";
along with display:none; in the css "div" made the text disappear and not display at all.

adding:
JavaScript:
document.getElementsByTagName("div").style.visibility = "hidden";
kept the text displayed and then ran the animation, as before
Any additional suggestion is appreciated
 
Last edited:

Johna

HTML, CSS and JS Coder
Staff Team
Guardian
Sorry I made a mistake.
You're actually supposed to add visibility: hidden; so the CSS, and then add document.getElementsByTagName("div").style.visibility = "visible"; to the JS so that you have:
JavaScript:
setTimeout(function () {
  runAfterDelay();
  document.getElementsByTagName("div").style = "visibility: visible !important";
}, 6000);
 
Last edited:

chrisj

Legendary Coder
Many thanks again. However, currently the text appears on page load, not upon delay start (which is what I'm trying to accomplish). When I add in visibility: hidden; to the css, nothing appears.
I have changed some names, here is the code currently:

CSS:
.span before {

  .pre-animation & {
    opacity: 0;

  }
}

.after {
  opacity: 0;
 transition: all 1s ease;

  .post-animation & {
    opacity: 1;
  }
}

#headline1 {
 font-family: arial;
  font-weight: 700;
  font-size: 5vw;
  color: #000000;
   margin-left: 15vw;
   width: 70vw;
   visibility: hidden;

  &.animating {
    color: $animating;
  }
}

And the js:

JavaScript:
function runAnimDelay() {

  !function($){$.fn.scramble=function(t,e,n,i){("number"!=typeof t||NaN===t||t<1e3||t>2e4)&&(t=3e3),("number"!=typeof e||NaN===e||e<5||e>1e3)&&(e=20);var r={numbers:["1","0"],alphabet:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],punctuation:["@","#","$","%","^","*","(",")","&","+","=","}","{","|",":",";",">","<","?","~"," "],get alphanumeric(){return this.numbers.concat(this.alphabet)},get all(){return this.alphanumeric.concat(this.punctuation)}};void 0!==n&&n in r||(n="all"),n=r[n],i=void 0!==i&&i!==!1;var a=this.text();this.text("");var s=function(t){var e=t.length,n=Math.floor(Math.random()*e),r=t[n];return i?r.toUpperCase():r},o=function(t,e,n){var i=e.slice(0,n);return i=i.join(""),t.splice(0,i.length,i)},h=function(t){for(var e=[],i=0;i<t;i++)e.push(s(n));return e},c=function(n,i){this.iteration=0,this.spliceIteration=0,this.$element=n,this.word=i,this.len=i.length,this.arr=i.split("");var r=parseInt(t/e/this.len);this.scramble=function(t){this.iteration+=1;var e=h(this.len);this.iteration%r===0&&(this.spliceIteration+=1),o(e,this.arr,this.spliceIteration);var n=e.join("");this.$element.text(n),this.spliceIteration===this.len&&window.clearInterval(t)}},l=new c(this,a),u=window.setInterval(function(){l.scramble(u)},e);return this}}(jQuery);

  function runAnimation() {

    jQuery('#headline1').addClass('pre-animation');
    jQuery('#headline1').scramble(3000, 50, "punctuation", true);

    jQuery('#headline1').append('<span class="after">.</span>');
    jQuery('#headline1').removeClass( 'pre-animation' ).addClass('post-animation');
  }

  function runNext() {
    jQuery('#headline1').append( "<span>.</span>" );
  }

  runAnimation();

}

setTimeout(function () {
  runAnimDelay();
  document.getElementsByTagName("headline1").style = "visibility: visible !important";
}, 8000);


here's the html:
HTML:
<div id="headline1"><span class="before"></span>This Is The Headline!!!</div>

Any other suggestions are appreciated.
 

Johna

HTML, CSS and JS Coder
Staff Team
Guardian
In the CSS, you added . before the span, but span is a tag name, to it shouldn't have the .
before. Unless you have a class called span.


Another thing in the CSS.
Is it supposed to be span::before or span .before? You did .span before.

And one last thing. Do you have a class named after? If not, you probably meant span::after?


Here a link on CSS selectors.
 

Johna

HTML, CSS and JS Coder
Staff Team
Guardian
In the JavaScript, since you're now selecting the element using the ID, you should use getElementById instead of getElementsByTagName


 

chrisj

Legendary Coder
Thanks for all your help.
It works successfully now.
I didn't write that code, so I'm wondering what the numbers here do:

JavaScript:
jQuery('#headline1').scramble(3000, 50, "punctuation", true);

I look forward to being enlightened
 

Johna

HTML, CSS and JS Coder
Staff Team
Guardian
Thanks for all your help.
It works successfully now.
I didn't write that code, so I'm wondering what the numbers here do:

JavaScript:
jQuery('#headline1').scramble(3000, 50, "punctuation", true);

I look forward to being enlightened
I'm not too sure, I've never used this in JS, but I'm guessing the numbers are speed and duration or something like that. Idk
 
Top