在PC在《纽约时报》中，有一个神奇的软件叫做变速齿轮，可以加速或减慢系统时间，通常用于修改游戏速度，实现插件的一般效果，这是令人难以置信的。
本文，将用JavaScript复制此功能，实现网页变速齿轮。
效果展示
首先，看看实现后的效果演示。如下图所示，网页上有一个循环滚动的小球。加速和减速两个按钮可以入侵和控制其速度。
注：变速操作并没有修改小球滚动的程序逻辑，而是变相地改变了网页的时间流速，改变了小球滚动的速度。
技术原理
如图所示，使用此功能API Hook实现技术，接管setTimeout函数(使用滚动球setTimeout实现)，然后获得第二个参数，即原函数timeout为了实现加速或减速，参数增加或减少了一定的值，然后使用apply调用原始方法setTimeout函数。
源码解析
页面UI 中间，两个按钮，一个CSS实现的小球。
从源码可以看出，是用的setTimeout控制球在一定范围内循环滚动，下一步是重点。
如图所示，核心代码并不复杂，但非常简单和清晰：定义有一个公共变量speed，加速或减速就是控制这个值。setTimeout在替代函数中，是的argument[1]参数增加此变量值。
<html> <body> <h1>JS变速齿轮DEMO</h1> <button onclick="dec_speed();">减速</button> <button onclick="add_speed();">加速</button> <div id="box" style="margin: 10px; position: absolute; width: 90px; height: 90px; background: #00ffff; border-radius: 50px;"></div> <script> ///变速增量 var speed = 0; //Hook setTimeut，实现变速 //备份原始setTimeout函数 var pre_setTimeout = setTimeout; //新的setTimeout函数 var setTimeout = function(){ arguments[1] = arguments[1] speed; console.log("arguments", arguments[1]); //最小为1，1毫秒 if(arguments[1]<1) arguments[1] = 1; //执行回调函数 pre_setTimeout.apply(this, arguments); } //加速 function add_speed(){ speed = speed - 20; console.log("速度",speed) if(speed < -100) speed = -100 } //减速 function dec_speed(){ speed = 20; console.log("速度",speed) if(speed > 200) speed = 200 } ///小球移动动画 function move() { var box = document.getElementById("box"); var current_position = 0; var left = 1; //循环调用 function render() { setTimeout(render, 100); current_position = left; if (current_position == 200 || current_position == 0){ left = -left; } box.style.left = current_position "px"; } render(); } move(); </script> </body> </html>以上是该变速功能的完整测试代码，保存为html可以使用文件。
代码保护
JavaScript这是一个明确的代码。大多数时候，我们不想泄露我们写的代码。例如，本文介绍的变速功能在第一次闻到它时感觉非常神奇，但代码公开后就很简单了。许多技术和功能都是这样的，所以是正确的JavaScript混淆和加密代码。以上代码为例，如果使用加密其中的JavaScript加密后的代码将变成以下密文形式。
此举可用于保护JavaScript代码，防止功能逻辑被窥探，代码被盗等。
功能扩展
到此，介绍对setTimeout的Hook，可用于对setTimeout实现的H5游戏变速。此外，一些游戏也可以使用setInterval、requestAnimationFrame实现游戏动画刷新。那么，也可以用同样的方法对这两个函数进行Hook，道理相通。
原创文章，不限转载，感谢支持。