老虎机游戏文本闪烁缓动速度及二次点击异常求助

嘿，我来帮你一步步拆解问题，解决你的困惑：

你遇到的问题出在time变量的作用域上——它是在document ready的全局作用域里定义的，第一次点击按钮后，time会持续累加计算到最终的最大值，第二次点击时并没有被重置回初始值0。同时循环的i从0开始，通过easeInOutExpo计算出来的时间会直接跳回到起始的低数值，导致看起来数值直接从50变成了0。

修复方案：每次点击按钮时，先把time重置为初始值：

$("#clickme").click(function() {
  time = 0; // 重置time到初始状态
  for (var i = 0, len = diff; i <= len; i++) {
    (function(s) {
      setTimeout(function() {
        $('#book').html("Page " + s + " turned");
      }, time);
    })(i);
    time = easeInOutExpo(i, minTime, maxTime, diff);
  }
});

你标记的这段(function(s) { ... })(i)是立即执行函数表达式（IIFE），核心作用是在循环中「捕获当前的i值」。

因为setTimeout是异步执行的，当整个循环跑完后，所有的setTimeout回调才会依次触发。如果不用IIFE，所有回调里的i都会指向循环结束后的最终值（也就是diff + 1），导致所有回调都显示同一个数值。通过把i作为参数传入IIFE，我们把当前循环步骤的i值保存到了IIFE的局部变量s中，这样每个setTimeout都能拿到对应循环步骤的正确数值。

针对移动端的老虎机开发，给你几个更优的方向：

• 优先用CSS动画+JS控制：CSS的@keyframes和transition支持硬件加速，在移动端的性能比jQuery动画更好。你可以用animation-timing-function模拟你需要的easeInOutExpo缓动效果（比如用cubic-bezier(0.19, 1, 0.22, 1)近似），通过JS添加/移除CSS类来触发老虎机滚轮的旋转动画。
• 替换递归闪烁为requestAnimationFrame：如果坚持用jQuery，尽量用requestAnimationFrame代替setTimeout/setInterval，它会和浏览器的刷新频率同步，减少移动端的卡顿问题。
• 保留服务器端防作弊逻辑：你最初的思路非常正确——服务器生成随机结果数组传给前端，前端只负责按照数组顺序播放动画，最终停在服务器指定的结果上。这种逻辑完全适配移动端，只需要确保接口请求的稳定性（比如处理网络异常、加载状态）。

内容的提问来源于stack exchange，提问作者power-of-ra