Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

Bronze 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:
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);
 
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:
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);
 
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:
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:
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.
 
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.
 
In the JavaScript, since you're now selecting the element using the ID, you should use getElementById instead of getElementsByTagName


 
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
 
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
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom