如何实现点击按钮后每2秒切换随机数组元素直到停止，现有代码不生效？

现有代码问题 #

• 变量引用错误：开头已定义display变量指向展示元素，后续代码误用未声明的emojiDisplay变量，获取元素时还将id错写为emojiDiplay（遗漏字母s），直接导致赋值失败无内容输出
• 未声明循环变量i，直接执行i++会抛出未定义错误，代码终止运行
• 未存储setInterval返回的定时器id，无法在stop函数中终止定时任务，且多次点击开始按钮会生成多个并行定时器，切换速度会异常变快
• HTML行内事件绑定的函数名未加引号，部分低版本浏览器无法识别，换行标签</br>写法不规范

修正后代码 #

JavaScript代码 #

var display = document.getElementById("emojiDisplay");
var emojiList = ["🥳", "🤩", "👾", "😵"];
var timerId = null; // 存储定时器唯一标识
var currentIndex = 0; // 存储当前展示emoji的数组下标

function randomEmoji() {
  // 启动前先清理已有定时器，避免重复生成
  if (timerId) clearInterval(timerId);
  // 随机生成第一个展示的emoji下标
  currentIndex = Math.floor(Math.random() * emojiList.length);
  display.innerHTML = emojiList[currentIndex];
  // 启动2秒定时切换任务
  timerId = setInterval(function() {
    currentIndex++;
    // 下标超出数组长度时重置到开头
    if (currentIndex === emojiList.length) currentIndex = 0;
    display.innerHTML = emojiList[currentIndex];
  }, 2000);
}

function stop() {
  // 清除正在运行的定时器
  if (timerId) {
    clearInterval(timerId);
    timerId = null;
  }
}

HTML代码 #

<button onclick="randomEmoji()">Display random emoji</button>
<button onclick="stop()">Stop</button>
<br>
<br>
<div id="emojiDisplay"></div>

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