javascript - 让整个过程持续一个设定的时间

Question

我正在创建一个脚本来更改按钮中的字母 a-la“电视 - 破解密码”风格，随机字母，慢慢地一个一个地弄清楚。

我希望它运行相同的时间(2 秒)，而不管最终的字符串长度如何。所以 ABC 和 This is a longer string! 都需要 2 秒，但是对于 ABC，每个字母被随机化的次数更多。

到目前为止我知道的变量是，它将运行 2000 毫秒，每 50 毫秒一次，并且我知道输出文本长度，例如3 和 24。我需要知道每个字母会被更改多少次。

我一直在绞尽脑汁试图让它工作，但无济于事。

Here's a link to a live demo

<input type="text" id="text" />
<input type="button" id="change" value="Change" />
<br /><br />
<span id="output">This is where the output will</span>

$(function(){

    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
    function getRandomInt(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function randomChar(){
        return chars[getRandomInt(0, chars.length - 1)];
    }

    var $output = $('#output');
    $output.text($output.text() + ' be');


    var INTERVAL = 50;

    var newOutput = function($elem, $newText){

        var chars = new String($newText).split('');
        var totalChars = chars.length;
        var doneChars = 0;


        var timer = setInterval(function(){

            var output = '';
            for(var staticChars = 0;staticChars < doneChars;staticChars++){
                output += chars[staticChars];
            }

            for(var randomChars = 0;randomChars < (totalChars -    doneChars);randomChars++){
                output += randomChar();
            }

            $elem.text(output);



          if(doneChars === totalChars){
                clearInterval(timer);
          }

          doneChars++;
        }, INTERVAL);

    }

  $('#change').click(function(){

    newOutput($output, $('#text').val());

  });
});

Answer 1

这可以通过设置执行突变的总时间然后将该时间除以目标字符串的长度来完成。这会给你花在每个 Angular 色上的时间。从那里开始，您可以在突变之间使用设定的时间量，并让它在插入正确的字符之前连续突变最后一个字符。

$(function(){
  var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  function getRandomInt(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function randomChar(){
    return chars[getRandomInt(0, chars.length - 1)];
  }
  
  var $output = $('#output');
  $output.text($output.text() + ' be');

  var INTERVAL = 50;
  var TOTAL_TIME = 2000;
  var TIME_PER_SWAP = 50;
  var newOutput = function($elem, $newText) {
    var chars = $newText.split('');
    var totalChars = chars.length;
    var doneChars = 0;
    // Total amount of time to spend on each new character
    var timePerCharacter = TOTAL_TIME / totalChars;
    setTimeout(function changeChar() {
      $elem.text($elem.text().slice(0, doneChars) + chars[doneChars++]);
      if (doneChars < totalChars) {
        setTimeout(changeChar, timePerCharacter);
      }
    }, timePerCharacter)
    
    // Randomly mix up the character
    setTimeout(function mix() {
      if (doneChars >= totalChars) {
      	return;
      }
      $elem.text($elem.text().slice(0, doneChars) + randomChar());
      setTimeout(mix, TIME_PER_SWAP);
    }, 0);
  }
  
  $('#change').click(function(){
    newOutput($output, $('#text').val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text" />
<input type="button" id="change" value="Change" />
<br /><br />
<span id="output">This is where the output will</span>