Question

我有这个打字机脚本，它在自引用功能中使用超时来为元素添加一个字符。

问题是firefox需要的时间比chrome要长，我希望它能在所有浏览器的相同时间内完成。

Chrome：执行于：3.167695

Firefox：执行于：4.10383

＆＃13;

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);
  }
}

＆＃13;

#text{
font-size:10px;  
}

＆＃13;

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

＆＃13;

我应该使用计时器计算每个周期要添加的字符数吗？解决这个问题的最佳方法是什么？

Answer 1

使用requestAnimationFrame - 然后您可以设置相当准确的经过时间 - 在示例中我使用3秒

等待是1000/60 - 因为requestAnimationFrame以60fps

运行

代码很容易就是

    var count = txt.length 3 / 60;

3是你想要的秒数，并删除var等待和过去 - 我只包括这样的代码，以帮助了解发生了什么

＆＃13;

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

＆＃13;

#text{
font-size:10px;  
}

＆＃13;

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

＆＃13;

Firefox：3.022785
Chrome：3.022000

足够接近gubmint的工作，你会说吗？

Answer 2

SetTimeout是一个异步调用，无论你在setTimeout中指定什么时间，都不意味着它会在那段时间后完全执行。无论什么时候做

setTimeout()

它的请求将存储在堆栈中，并且能够在那之后执行。在doenot意味着尽快。所以我们对此没有任何控制权。

现在的问题是两个浏览器有什么区别？ Chrome使用v8 javascript引擎，firefox使用spidermonkey。所以就好像你要求两个人同时完成同样的任务。（如果我错了，请纠正我）

如何弥补浏览器之间的循环性能差异

2 个答案: