Miro Miro - 3 months ago 10
Javascript Question

How to compensate for loop performance differences among browsers

I have this typewriter script which uses timeout in a self-referencing function to add a character to element.

The problem is that is takes longer on firefox than in chrome and I want it to complete within the same duration across all browsers.

Chrome: Performed in: 3.167695

Firefox: Performed in: 4.10383



var start = performance.now();

txt = $('#text').html();
typeWriter(txt,0);

function typeWriter(text, n) {
if (n < (text.length)) {
$('#text').html( text.substring(0, n+=2) );

setTimeout(function() {
typeWriter(text, n);
}, 1);
}else{

var end = performance.now();
$('body').append('<h4>Performed in: ' + (end - start)/1000);
}
}

#text{
font-size:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo rem, id nemo, animi repellendus ullam error ratione molestias, praesentium temporibus. Repudiandae dolorum consequuntur at tenetur, beatae debitis dolore dicta animi omnis quo, laborum quos? Veritatis quas provident iste adipisci deserunt excepturi a, suscipit neque soluta error impedit animi. Exercitationem aliquid reprehenderit excepturi. Nisi placeat unde, iste veniam? Molestias, soluta et corrupti possimus deleniti magni tenetur! Ut ab, dolores dicta temporibus amet debitis harum dignissimos, nisi neque cum assumenda accusamus minima quod deserunt veniam suscipit tempore eligendi labore. Eum ut, quod repellat adipisci distinctio sit nobis cum iure porro quasi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem harum repellat vitae atque ipsa cumque sed iste adipisci omnis, ad magnam numquam amet, totam, autem ab quis maxime ea, ducimus nulla sunt assumenda aliquam distinctio. Quam sit ducimus, amet esse sunt consectetur facilis praesentium, soluta fugiat vero alias vel. Aspernatur amet ea odit hic voluptatum, doloremque rem cumque dolore accusamus quia enim praesentium, officia deserunt reprehenderit ex debitis. Provident eos voluptate quibusdam, esse atque porro, nisi sunt amet fugit, distinctio beatae! Sed atque voluptatum ullam illum perspiciatis aut mollitia! Cumque voluptatum rerum, accusantium, ad placeat culpa voluptatibus distinctio aspernatur laudantium.</div>





Should I use the timer to figure out how many characters to add per cycle? What's the best way to fix this?

Answer

Use requestAnimationFrame - you can then set a pretty accurate elapsed time - in the example I use 3 seconds

the wait is 1000/60 - because requestAnimationFrame runs at 60fps

the code could easily just be

    var count = txt.length 3 / 60;

Where the 3 is the number of seconds you want this to take, and remove the var wait and elapse - I've only included the code like this to help see what's happening

    var start = performance.now();
    var txtEl = document.getElementById('text');
    var txt = txtEl.textContent;
    var wait = 1000/60;
    var elapse = 3000;
    var count = txt.length * wait / elapse;
    var typeWriter = function (text, n) {
      if (n < (text.length)) {
        txtEl.textContent= text.substr(0, n+=count);
        requestAnimationFrame(function() {
            typeWriter(text, n)
        });
      } else {
        var end = performance.now();
        document.body.insertAdjacentHTML('beforeEnd', '<h4>Performed in: ' + (end - start)/1000);
      }
    }
    typeWriter(txt, 0);
#text{
font-size:10px;  
}
<div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo rem, id nemo, animi repellendus ullam error ratione molestias, praesentium temporibus. Repudiandae dolorum consequuntur at tenetur, beatae debitis dolore dicta animi omnis quo, laborum quos? Veritatis quas provident iste adipisci deserunt excepturi a, suscipit neque soluta error impedit animi. Exercitationem aliquid reprehenderit excepturi. Nisi placeat unde, iste veniam? Molestias, soluta et corrupti possimus deleniti magni tenetur! Ut ab, dolores dicta temporibus amet debitis harum dignissimos, nisi neque cum assumenda accusamus minima quod deserunt veniam suscipit tempore eligendi labore. Eum ut, quod repellat adipisci distinctio sit nobis cum iure porro quasi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem harum repellat vitae atque ipsa cumque sed iste adipisci omnis, ad magnam numquam amet, totam, autem ab quis maxime ea, ducimus nulla sunt assumenda aliquam distinctio. Quam sit ducimus, amet esse sunt consectetur facilis praesentium, soluta fugiat vero alias vel. Aspernatur amet ea odit hic voluptatum, doloremque rem cumque dolore accusamus quia enim praesentium, officia deserunt reprehenderit ex debitis. Provident eos voluptate quibusdam, esse atque porro, nisi sunt amet fugit, distinctio beatae! Sed atque voluptatum ullam illum perspiciatis aut mollitia! Cumque voluptatum rerum, accusantium, ad placeat culpa voluptatibus distinctio aspernatur laudantium.</div>

  • Firefox: 3.022785
  • Chrome: 3.022000

Close enough for gubmint work, would you say?