JavaScript随机颜色生成器前进后退按钮切换颜色异常问题

问题根源 #

你遇到的点击两次backward才生效的问题，和pop()、push()方法本身无关，是当前的历史栈管理逻辑存在问题：你应该是把当前正在显示的颜色存在了历史数组的最后一位，首次点击后退直接调用pop()取出的还是当前显示的颜色，所以视觉上没有变化，第二次调用pop()才能取出上一个历史颜色。

优化方案 #

你可以任选以下两种逻辑调整，不需要替换pop()和push()：

方案1：单数组加索引管理（更推荐） #

• 用数组colorHistory存储所有生成过的颜色，单独定义变量currentIndex记录当前显示颜色对应的数组下标，初始值为0
• 每次生成新的随机颜色时，直接push到colorHistory末尾，同时将currentIndex赋值为colorHistory.length - 1，渲染该下标对应的颜色即可
• 点击backward时，只要currentIndex > 0，就将currentIndex减1，直接取colorHistory[currentIndex]渲染
• 点击forward时，只要currentIndex < colorHistory.length - 1，就将currentIndex加1，取对应下标的颜色渲染
• 如果用户在浏览历史过程中生成了新颜色，先删除colorHistory中currentIndex + 1及之后的所有元素，再push新颜色、更新currentIndex，避免出现历史分支错乱

方案2：双栈实现 #

• 定义两个栈：backStack存储可后退的历史颜色，forwardStack存储可前进的历史颜色
• 每次生成新颜色时，将当前显示的颜色push到backStack，更新当前显示颜色为新生成的颜色，同时清空forwardStack
• 点击backward时，将当前显示颜色push到forwardStack，当前显示颜色替换为backStack.pop()的结果
• 点击forward时，将当前显示颜色push到backStack，当前显示颜色替换为forwardStack.pop()的结果

结论 #

pop()和push()完全可以满足历史管理的需求，不需要更换方法，只要调整对应的管理逻辑即可解决当前的异常问题。

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