Question

我需要以下代码来按键入顺序一次键入/取消键入每个字符串。当前，它正在执行，但是i ++在循环中触发了太多次，并破坏了事件的顺序。请帮助纠正迭代，以便可以按顺序键入/取消键入任意数量的字符串。

<div class="flex-container">
    <h1>Innovative Solutions
        <br>for
        <span id="str"></span>
    </h1>
    <hr>
    <p>This is filler content. The text in this area will be replaced when copy for the site becomes available. This is filler content. The text in this area will be replaced when copy for the site becomes available.</p>
    <a href="#">Learn More</a>
</div>



$(function() {

  var speed = 200;
  var speed2 = 50;
  var str = document.getElementById('str');
  var i = 0;
  var isRemoving = false;

  var messages = [
    "Cyber Security...",
    "Vulnerability Assessments...",
    "Program Management...",
    "Compliance Management..."
  ]

  function action() {
    console.log('Action')

    if (isRemoving) {
      if (str.innerText.length > 0) {
        str.innerText = str.innerText.substr(0, str.innerHTML.length - 1);
        setTimeout( action, speed2 );
        return;
      }
      isRemoving = false;
      i++;
      if (i === messages.length) {
        i = 0;
      }
      setTimeout( action, 500 );
      return;
    }

    var message = messages[i];

    str.innerText = message.substr(0, str.innerHTML.length + 1);
    if (str.innerText.length === message.length) {
      setTimeout(function() {
        isRemoving = true;
        console.log(isRemoving)
      }, 2000)
    }
    setTimeout( action, isRemoving ? speed2 : speed );
  }

  setTimeout( action, speed ) ;
})

Answer 1

我的目标是在您的代码中仅出现setTimeout。使所有其余部分保持动态，并将 state 传递到action的每个下一次调用（为此使用bind）。

这是它的外观：

var str = document.getElementById('str');

var messages = [
    "Cyber Security...",
    "Vulnerability Assessments...",
    "Program Management...",
    "Compliance Management..."
]

function action(idx, len, dir) {
    str.textContent = messages[idx].slice(0, len);
    if (len % messages[idx].length == 0) dir = -dir; // Change direction
    setTimeout(
        action.bind(null, (idx+(len==0)) % messages.length, len+dir, dir), 
        len == messages[idx].length ? 2000 : dir < 0 ? 50 : 200 // Delay
    );
}

action(0, 1, 1); // Not really useful to have setTimeout here. Just call it.

<div class="flex-container">
    <h1>Innovative Solutions
        <br>for
        <span id="str"></span>
    </h1>
    <hr>
    <p>This is filler content.</p>
</div>

Answer 2

如果您不想重做整个代码，则可以在消息完全键入（i++;）时调用str.innerText.length === message.length

$(function() {

  var speed = 200;
  var speed2 = 50;
  var str = document.getElementById('str');
  var i = 0;
  var isRemoving = false;

  var messages = [
    "Cyber Security...",
    "Vulnerability Assessments...",
    "Program Management...",
    "Compliance Management..."
  ]

  function action() {
    console.log('Action')

    if (isRemoving) {
      if (str.innerText.length > 0) {
        str.innerText = str.innerText.substr(0, str.innerHTML.length - 1);
        setTimeout(action, speed2);
        return;
      }
      isRemoving = false;

      setTimeout(function() {
        action();
      }, 500);
      return;
    } else {

      var message = messages[i];
      console.log(i);
      str.innerText = message.substr(0, str.innerHTML.length + 1);
      if (str.innerText.length === message.length) {

        i++;
        if (i === messages.length) {
          i = 0;
        }

        setTimeout(function() {
          isRemoving = true;
          setTimeout(action, isRemoving ? speed2 : speed);
        }, 2000)

      } else {
        setTimeout(action, isRemoving ? speed2 : speed);
      }
    }
  }

  setTimeout(action, speed);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <h1>Innovative Solutions
    <br>for
    <span id="str"></span>
  </h1>
  <hr>
  <p>This is filler content. The text in this area will be replaced when copy for the site becomes available. This is filler content. The text in this area will be replaced when copy for the site becomes available.</p>
  <a href="#">Learn More</a>
</div>

Answer 3

$(function() {

    var speed = 200;
    var speed2 = 50;
    var str = document.getElementById('str');
    var index =0;
    var isRemoving = false;
  
    var messages = [
      "Cyber Security...",
      "Vulnerability Assessments...",
      "Program Management...",
      "Compliance Management..."
    ] 
   
    
    function getIndex(index1){  
   
    if(index1===messages.length){
        return(0)
    }
    else{
        return(index1);
    }
}
    function action(){  
     
    if(isRemoving){  
        str.innerText = str.innerText.substr(0,str.innerHTML.length - 1);
        if(str.innerHTML.length===0) {
            index=getIndex(index+1);
            isRemoving=false;        
        }      
        setTimeout( action, speed2 );        
    }
    else{      
        str.innerText = messages[index].substr(0, str.innerHTML.length + 1);
        if(str.innerHTML.length===messages[index].length){
           
            isRemoving=true; 
        }         
        setTimeout( action, speed );
       }  
       
    }    
  
    setTimeout( action, speed ) ;
  });

  <div class="flex-container">
    <h1>Innovative Solutions
        <br>for
        <span id="str"></span>
    </h1>
    <hr>
    <p>This is filler content. The text in this area will be replaced when copy for the site becomes available. This is filler content. The text in this area will be replaced when copy for the site becomes available.</p>
    <a href="#">Learn More</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

字符串列表的键入效果。需要帮助确定事件的顺序

3 个答案: