为什么嵌套的setTimeout延迟不能工作？

Question

当我滚动我的“框架-2”元素时，我想每300 my修改一次单词。这个单词每300毫秒换一次，并停止在我的数组中的每一个字上。

滚动函数可以工作。每个字的停止也有效，但延迟不是300毫秒，不受尊重，字词几乎立即改变。你看到我看不到的错误了吗？

function interval(func, wait, times){
    var interv = function(w, t){
      return function(){
        if(typeof t === "undefined" || t-- > 0){
          setTimeout(interv, w);
          try{
            func.call(null);
          }
          catch(e){
            t = 0;
            throw e.toString();
          }
        }
      };
    }(wait, times);

    setTimeout(interv, wait);
  };

  var words21 = ["communication.", "image.", "concept.", "référencement.", "stratégie.", "contenu.", "social média."];
  var text21 = "repensent votre <span class='surlignement-rouge-text'>communication.</span>";
  var i21;
  var wi21;

  function _getChangedText21() {
    i21 = (i21 + 1);
    if (words21[i21] != undefined) {
      return text21.replace(/communication./, words21[i21]);
    } else {
      return text21.replace(/communication./, words21[wi21]);
      wi21 = (wi21 + 1);
    }
  }

  $(window).scroll(function() {
    text21.replace(/communication./, words21[0]);
    i21 = 0;
    wi21 = 1;
    x = 0;
    var hT20 = $('#frame-2').offset().top,
        hH20 = $('#frame-2').outerHeight(),
        wH20 = $(window).height(),
        wS20 = $(this).scrollTop();

    if (wS20 > (hT20+hH20-wH20)) {
      interval(function _getInterval21() {
        interval(function _changeText21() {
          var txt21 = _getChangedText21();
          document.getElementById("changer2").innerHTML = txt21;
        }, 300, 8);
        selectwords21 = words21[0];
        words21.shift();
        words21.push(selectwords21);
      }, 2000, 6);
      selectwords21 = words21[0];
      words21.shift();
      words21.push(selectwords21);
      selectwords21 = words21[0];
      words21.shift();
      words21.push(selectwords21);
    }
  });

我很喜欢，BadWoo

编辑:这里有一个代码示例：https://codepen.io/BadWoo/pen/MWyQbPB

Answer 1

如果您想要做的只是更改changer2中的文本，以一个旋转的单词列表代替“交流”。您可以在几行代码中做到这一点(参见下面的示例)。

不需要不停地移动和推词--只需使用模运算符%

• No就需要嵌套调用setTimout --使用setInterval

假设我已经正确理解了您想要实现的目标，下面是工作代码(根据需要调整时间)：

​

function changeWords(){

  var words = ["communication.", "image.", "concept.", "référencement.", "stratégie.", "contenu.", "social média."];
  var i = 1;
  setInterval( () => {
    document.querySelector('.surlignement-rouge-text').innerHTML = words[i++ % words.length];
  }, 1000);

}

// You could call this from your scroll handler!
changeWords();

.surlignement-rouge-text{
    color: red
}

<span id="changer2">repensent votre <span class='surlignement-rouge-text'>communication.</span></span>

​

在进一步了解了您的需求之后，代码似乎确实需要更复杂一些，但不需要太多！

​

var words = ["communication.", "image.", "concept.", "référencement.", "stratégie.", "contenu.", "social média."];

async function changeWords(interval){

  return new Promise( resolve => {
  
    var i = 0;
    var timer = setInterval( () => {
      document.querySelector('.surlignement-rouge-text').innerHTML = words[i++];
      if(i == words.length){
        clearInterval(timer);
        resolve();
      }
    }, interval);
  });
}

async function cycleWords(shortInterval, longInterval, i){
  await changeWords(shortInterval);
  document.querySelector('.surlignement-rouge-text').innerHTML = words[i % words.length];
  setTimeout(() => cycleWords(shortInterval,longInterval, i+1),longInterval);
}

// You could call this from your scroll handler!
cycleWords(300,2000,0);

.surlignement-rouge-text{
    color: red
}

<span id="changer2">repensent votre <span class='surlignement-rouge-text'>communication.</span></span>

​

Answer 2

首先，t永远不会是"undefined"，但它可以是undefined。第二，而不是调用setTimeout(interv, wait) do setTimeout(interv(), wait)，因为interv返回一个函数，这就是您想要执行的。