通过 select 按钮更改自输入文本无法正常工作

Question

https://jsfiddle.net/AlexThunders/k8s79zL5/18/

当我点击 select 中的选项时，我正在尝试将自输入文本从英语更改为俄语：

  let engType = [
    'Never give up. ',
     'You can win. '
  ]
  
  let rusType = [
    'Никогда не сдавайся. ',
    'Ты можешь победить. '
  ]

页面已加载，此功能逐渐键入字母：

  function typeCharacters(phrases) {
    if(phrases[count] !== undefined && phrases[count] !== null && phrases[count] !== "") {
      let allLength  = phrases[count].length
      setInterval(() => {
        if(phrases[count] !== undefined && typePar !== null) {
          character = phrases[count].slice(ind,ind+1)
          txt = document.createTextNode(character)
          typePar.appendChild(txt)
          ind++
          let typeLength = typePar.textContent.length
          if(typeLength === allLength) {
            count++
            ind = 0
            if(phrases[count] !== undefined) {
              allLength += phrases[count].length
            }
          } 
        }
      },100)
    }
  }
  typeCharacters(engType)

有效。但是，当我只是触摸 select 按钮而没有选择语言时，我会在同一段落中得到一种或两种语言混合字母的无意义段落：


  function searchLang(choosenLang) {
    //if choosen language coincides with one in Object:
    if(languages[choosenLang]) {
      allDataElements.forEach(element => {
        //every property of choosen object/language
        for(let x in languages[choosenLang]) {
          //compare with element's data attribute
          if(element.getAttribute('data') === x) {
            //the same attribute changes iinerText in accordance with object
            element.innerText = languages[choosenLang][x]
            if(languages[choosenLang].changePhrases !== undefined) {
              languages[choosenLang].changePhrases(choosenLang)
            }
          }
        }
      })
    }
  }
  
  select.addEventListener('click', () => {
    allLangOptions.forEach(option => {
      if(option.selected === true) {
        let lang = option.value
        searchLang(lang)
      }
    })
  })

结果：

Никeгда не сд.вайся. Тыuможешь по едить. OR

Никогда нe up. айс

然而，对于其他 html 元素，select 按钮工作正常：仅当我选择选项但不单击 select 本身时。

我在对象中使用 changePhrases 函数来更改输入段落中的语言：

let languages = {
    en: {
        mPheadLIabout: 'About',
        mPheadLIprojects: 'Projects',
        mPheadLIcontacts: 'Contacts',
        changePhrases: function() {
          if(typePar !== null) {
            typePar.textContent = "";
            count = 0
            ind = 0
            typeCharacters(engType)
          }
        }
      },
    ru: {
        mPheadLIabout: 'О сайте',
        mPheadLIprojects: 'Проекты',
        mPheadLIcontacts: 'Контакты',
        changePhrases: function() {
          if(typePar !== null) {
            typePar.textContent = "";
            count = 0
            ind = 0
            typeCharacters(rusType)
          }
        }
      }
  }

第一段自行清除，并从第一个字符开始键入，如上所示。

我尝试使用变量重置来停止调用输入英文字符，但没有成功。

此外，我还使用 setTimeout 应用了不同的变体，并承诺在段落被清除时的情况，只有这样你才运行函数 typeCharacters(rusType)。仍然无法正常工作，控制台中也没有错误。

和我用英语得到的结果一样。

看起来当我单击 select 按钮（不是选项）时它再次触发功能来键入文本，而不是等到我使用选项。当我单击选项时，它会同时触发 times。

这是完整的代码和奇怪的结果：

https://jsfiddle.net/AlexThunders/k8s79zL5/18/

Answer 1

您不应将事件处理程序绑定到 click 事件，而应仅在用户更改 select 元素的 selected 选项时触发回调。所以事件类型应该是 change:

select.addEventListener('change', () => {
  allLangOptions.forEach((option) => {
    if (option.selected === true) {
      let lang = option.value;
      searchLang(lang);
    }
  });
});

这样您也可以使用键盘更改选项。虽然键盘用户可以更改语言选项，因为这不是鼠标单击，但您的 click 事件不会触发并且 addEventListener 内的回调不会运行。确保始终挂钩 select 元素的 change 事件。

另一个问题是您永远不会取消间隔。当你 select 一种语言时，它只会启动另一个计时器，这只会把一切都搞砸。看起来效果加快了，文本变得乱码，因为不同的字符混合在一起，等等。

为避免这种情况，您需要保存从 window.setInterval() 返回的间隔 ID，并在运行 typeCharacters():

时取消它

// ...
let reset = false;
// create a variable in an outer scope
let activeInterval = null;

function typeCharacters(phrases) {
  // clear running interval
  clearInterval(activeInterval);

  if (reset) return;
  if(phrases[count] !== undefined
    && phrases[count] !== null
    && phrases[count] !== "") {
    let allLength  = phrases[count].length

    // save the interval ID
    activeInterval = setInterval(() => {
      if(phrases[count] !== undefined && typePar !== null) {
      // ... rest of your code

通过 select 按钮更改自输入文本无法正常工作

changing self typing text via select button not working correctly

javascript

html-select