纯JavaScript跑马灯本地正常，在线沙箱提示startCycle未定义求助

你遇到的问题核心是作用域差异：

在本地机器和你的VPS上，你的JavaScript代码直接运行在全局作用域中，startCycle函数作为全局函数存在，所以页面最后<script>startCycle();</script>的调用能正常找到它。

但像jsfiddle、codepen这类在线沙箱，默认会把你输入的JavaScript代码包裹在一个局部闭包作用域里（比如自动放在DOMContentLoaded回调或自执行匿名函数中）。这就导致startCycle变成了闭包内的局部函数，全局作用域无法访问到它，所以调用时会提示“未定义”。

这里有几种可行的修复方式：

1. 将startCycle挂载到全局对象 #

修改你的函数定义，把它绑定到window对象上，让它成为全局可访问的函数：

window.startCycle = function() {
  timer = setInterval(function() {
    head -= step;
    slide.style.left = head + "px";
    if (head < -w2) head = w1;
  }, 100);
};

2. 把函数调用移到同一作用域内 #

在在线沙箱的JS编辑面板中，直接在代码末尾添加startCycle();，而不是放在单独的<script>标签里。这样调用和函数定义处于同一个闭包作用域，就能正常访问。

3. 额外的代码细节修正 #

另外，你的代码里还有几个小问题需要注意，避免其他潜在报错：

• 代码中出现的<是HTML转义字符，要改回原生的<（比如if (w1 < 600)改成if (w1 < 600)）
• 在线沙箱不支持PHP，所以<script src="assets/script.js?v=<?php echo date('His'); ?>"></script>里的PHP代码无效，直接用普通的脚本引入或把JS代码放在沙箱面板中即可
• 变量timer和step建议提前声明，避免隐式全局变量的问题

<div id="rolloverWrap">
  <ul id="rollover">
    <li style="margin-left:0;">HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
    <li>JQuery</li>
    <li>Ajax</li>
    <li>Jason</li>
    <li>AngularJS</li>
    <li>PHP</li>
    <li>Linux</li>
    <li style="margin-right:0;">MySQL</li>
  </ul>
</div>

<style>
#rolloverWrap {
  position: relative;
  margin-top: 300px;
  overflow: hidden;
  line-height: 1.5rem;
  background: #caadde;
}
#rollover {
  position: relative;
  color: #374b64;
  font-size: 1.13rem;
  font-weight: 300;
  width: 811px;
  height: 1.5rem;
  overflow: hidden;
  list-style-type: none;
  padding: 0;
}
#rollover li {
  float: left;
  margin: 0 15px;
  cursor: pointer;
}
#rollover li:hover {
  color: #f9f9f9;
}
</style>

<script>
var wrap = document.getElementById("rolloverWrap");
var slide = document.getElementById("rollover");
var items = document.getElementsByTagName("li");
var w1 = wrap.offsetWidth;
var w2 = slide.offsetWidth;
var head = w1, timer, step;

window.onload = function() {
  if (w1 < 600) {
    step = 3;
  } else {
    step = 6;
  }
  slide.style.left = w1 + "px";

  for (var i = 0; i < items.length; i++) {
    items[i].addEventListener("mouseover", function stopRoll() {
      clearInterval(timer);
    });
    items[i].addEventListener("mouseout", startCycle);
  }
};

window.addEventListener("resize", function() {
  w1 = wrap.offsetWidth;
  w2 = slide.offsetWidth;
  if (w1 <= head) head = w1;
  if (w1 < 600) {
    step = 3;
  } else {
    step = 6;
  }
});

window.startCycle = function() {
  timer = setInterval(function() {
    head -= step;
    slide.style.left = head + "px";
    if (head < -w2) head = w1;
  }, 100);
};

startCycle();
</script>

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