为什么我的嵌套 setTimeout 延迟不起作用？

Question

当我在“frame-2”元素上滚动时，我想每 300 毫秒更改一次文字。这个词每 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

首先t永远不会是"undefined"，但可以是undefined。其次，不要调用 setTimeout(interv, wait) 而是执行 setTimeout(interv(), wait)，因为 interv returns 一个函数，这就是你想要执行的。

Answer 2

如果您要做的只是更改 changer2 中的文本，以轮换单词列表来代替“交流”。你可以用几行代码来做到这一点（见下面的例子）。

无需不断地移动和推送单词——只需使用模运算符 %
无需嵌套调用 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>

为什么我的嵌套 setTimeout 延迟不起作用？

why my nested setTimeout delay not working?

javascript

jquery

settimeout