javascript-函数仅在第二次调用时起作用

我有一个演示

我有一个由块组成的条，上面有一个标记和一个输入字段

在输入字段中输入数字将使标记滑动到该百分比

当标记位于块上方时，块应改变颜色

const marker = document.querySelector('.bar-marker');
const bars = document.querySelectorAll('.bar-item');
const input = document.querySelector('.value');

(function() {

  input.addEventListener("keyup", (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
      const inputVal = document.querySelector('.value').value;
      moveBar(inputVal)
    }    
  })

  function moveBar(val){
    marker.style.left = val + '%';
    for(let i=0; i<=bars.length; i++){
      bars[i].classList.remove('selected')
      if(marker.offsetLeft > 
        bars[i].offsetLeft && marker.offsetLeft < 
        bars[i].offsetWidth+bars[i].offsetLeft){
        bars[i].classList.add('selected')
      }
    }
  }

})();

这可以工作，但块仅在标记移动到另一个块或再次单击enter键后才会更改颜色

为什么标记移动到块时块不改变颜色

const marker = document.querySelector('.bar-marker');
const bars = document.querySelectorAll('.bar-item');
const input = document.querySelector('.value');

(function() {

  input.addEventListener("keyup", (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
      const inputVal = document.querySelector('.value').value;
      moveBar(inputVal)
    }    
  })

  function moveBar(val){
    marker.style.left = val + '%';
    for(let i=0; i<=bars.length; i++){
      bars[i].classList.remove('selected')
      if(marker.offsetLeft > 
        bars[i].offsetLeft && marker.offsetLeft < 
        bars[i].offsetWidth+bars[i].offsetLeft){
        bars[i].classList.add('selected')
      }
    }
  }

})();

这是因为滑块有2s动画过渡，这意味着marker.offsetLeft将具有滑块的起始点值，因为到达其目标的2s延迟。解决方案是等待2秒，以便动画可以结束，然后运行脚本

使用2.1s的setTimeout可以工作

function moveBar(val){
    marker.style.left = val + '%';
    setTimeout(function(){ 
      for(let i=0; i<=bars.length; i++){
        bars[i].classList.remove('selected')
        if(marker.offsetLeft > 
          bars[i].offsetLeft && marker.offsetLeft < 
          bars[i].offsetWidth+bars[i].offsetLeft){
          bars[i].classList.add('selected')
        }
      }
    }, 2100);
  }

这是因为滑块有2s动画过渡，这意味着marker.offsetLeft将具有滑块的起始点值，因为到达其目标的2s延迟。解决方案是等待2秒，以便动画可以结束，然后运行脚本

使用2.1s的setTimeout可以工作

function moveBar(val){
    marker.style.left = val + '%';
    setTimeout(function(){ 
      for(let i=0; i<=bars.length; i++){
        bars[i].classList.remove('selected')
        if(marker.offsetLeft > 
          bars[i].offsetLeft && marker.offsetLeft < 
          bars[i].offsetWidth+bars[i].offsetLeft){
          bars[i].classList.add('selected')
        }
      }
    }, 2100);
  }

---

我选择将classList.remove和classList.add分开，以便在输入新值后，颜色栏立即重置，然后在标记停止后更改：

const marker=document.querySelector'.bar marker'； const bars=document.queryselectoral'.bar项'； 常量输入=document.querySelector'.value'； 作用{ input.addEventListenerkeyup，事件=>{ 违约事件； 如果event.keyCode==13{ const inputVal=document.querySelector'.value'.value； moveBarinputVal } } 函数moveBarval{ marker.style.left=val+'%'； forlet i=0；i 条形图[i].offsetLeft&&marker.offsetLeft< 条[i]。偏移网宽+条[i]。偏移网宽{ 条形图[i]。类列表。添加“选定” } } }, 2000 }

---

}; 我选择将classList.remove和classList.add分开，以便在输入新值后，颜色栏立即重置，然后在标记停止后更改：

const marker=document.querySelector'.bar marker'； const bars=document.queryselectoral'.bar项'； 常量输入=document.querySelector'.value'； 作用{ input.addEventListenerkeyup，事件=>{ 违约事件； 如果event.keyCode==13{ const inputVal=document.querySelector'.value'.value； moveBarinputVal } } 函数moveBarval{ marker.style.left=val+'%'； forlet i=0；i 条形图[i].offsetLeft&&marker.offsetLeft< 条[i]。偏移网宽+条[i]。偏移网宽{ 条形图[i]。类列表。添加“选定” } } }, 2000 }

---

};斯塔克：是的。我知道，也曾经认为这是一个问答网站。现在，在你敢于提出问题之前，你必须研究一系列政策。再等一分钟，你的问题就结束了。是的。我知道，也曾经认为这是一个问答网站。现在，在你敢于提出问题之前，你必须研究一系列政策。再多一分钟，你的问题就结束了。