如何让实现元素切换的JavaScript函数持续循环执行？

你的MyDraft函数已经能完成单次切换逻辑，要让它循环执行，只需要用setInterval定时调用这个函数即可。以下是具体实现方案：

1. 基础循环实现 #

直接在页面加载完成后，用setInterval设置定时调用，比如每2秒切换一次：

function MyDraft(){
  var x = document.getElementById("one");
  var y = document.getElementById("two");
  if (y.style.display === "none"){
    x.style.display = "none";
    y.style.display = "block";
  }
  else {
    x.style.display = "block";
    y.style.display = "none";
  }
}

// 页面加载完成后启动循环，每2000毫秒（2秒）切换一次
window.onload = function() {
  setInterval(MyDraft, 2000);
};

2. 修复初始状态判断问题 #

如果你的元素初始状态是通过外部CSS（而非内联style属性）设置的，y.style.display可能无法正确获取初始值，这时候可以用getComputedStyle来获取实际生效的样式：

function MyDraft(){
  var x = document.getElementById("one");
  var y = document.getElementById("two");
  // 获取元素实际生效的display样式
  var yDisplay = window.getComputedStyle(y).display;
  
  if (yDisplay === "none"){
    x.style.display = "none";
    y.style.display = "block";
  }
  else {
    x.style.display = "block";
    y.style.display = "none";
  }
}

window.onload = function() {
  setInterval(MyDraft, 2000);
};

3. 停止循环的方法 #

如果需要在某个时机停止切换，可以保存setInterval返回的定时器ID，然后用clearInterval清除：

// 保存定时器ID
var toggleInterval;

window.onload = function() {
  toggleInterval = setInterval(MyDraft, 2000);
};

// 示例：点击按钮停止切换
function stopToggle() {
  clearInterval(toggleInterval);
}

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