JS随机标签抽取高亮效果循环异常仅闪动最终选中标签问题

• 固定提前生成最终选中的标签result，整个闪动循环全程仅操作这一个标签，没有每次循环重新抽取随机标签，因此不会遍历所有标签，仅闪动最终结果。
• randomSelectTag函数中return语句在console.log之前执行，该行日志为永远无法触发的无效代码。
• 停止定时器的逻辑误用setInterval，实际仅需执行一次停止操作，用setTimeout即可，避免重复执行无意义逻辑。
• 缺少闪动次数计数器，无法准确控制随机滚动的停止时机。

• 取消提前生成固定结果的逻辑，每次定时器触发时重新抽取随机标签，实现滚动闪动效果。
• 新增计数器记录闪动次数，达到预设次数后停止滚动，生成最终固定的选中标签并高亮。
• 修正函数内无效代码的顺序，替换错误的定时器类型。

function randomPick(){
  var times = 30; 
  var currentCount = 0;
  var tags = $('.tag');
  var lastHighlightTag = null;

  function randomSelectTag(){
    console.log(tags);
    return tags[Math.floor(Math.random() * tags.length)];
  };

  function highlight(tag){
    tag.classList.add('highlight');
  };
  function unhighlight(tag){
    tag.classList.remove('highlight');
  };

  var rollInterval = setInterval(function(){
    // 取消上一个标签的高亮
    if(lastHighlightTag) {
      unhighlight(lastHighlightTag);
    }
    // 抽取新的随机标签高亮
    const currentTag = randomSelectTag();
    highlight(currentTag);
    lastHighlightTag = currentTag;
    currentCount++;

    // 达到滚动次数后停止，确定最终选中结果
    if(currentCount >= times) {
      clearInterval(rollInterval);
      unhighlight(lastHighlightTag);
      const finalTag = randomSelectTag();
      highlight(finalTag);
    }
  }, 100);
};

内容的提问来源于stack exchange，提问作者Penny Chang