JavaScript:如何给setTimeout传递参数

￡神魔★判官ぃ 2022-07-12 11:59 185阅读 0赞

本文介绍一种在使用异步函数setTimeout时给其带上参数的方法。

写这篇文章的时候，在高级浏览器比如Google Chrome上，setTimeout已经支持带第二个以外的参数，而且IE10 、IE11也是可以的，效果如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

IE9以及以下，还不支持：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

针对这种情况，其实也有解决办法的，思路就是重写setTimeout方法。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>settimeout</title>
    </head>
    <body>
        <div id="root">
    
        </div>
    
        <script type="text/javascript">
            function add(a,b){
                return a + b;
            }
            var __sto = setTimeout;
        　　window.setTimeout = function(callback,timeout,param){
            　　var args = Array.prototype.slice.call(arguments,2);
            　　var _cb = function(){
            　　    callback.apply(null,args);
            　　}
            　　__sto(_cb,timeout);
        　　}
            window.onload = function(){
                window.setTimeout(function(a,b){
                    console.log("a + b = ",add(a,b))
                },1000,3,5);
            }
        </script>
    </body>
    </html>

上面这段在HTML文件中的<script></script>部分重新定义setTimeout的做法就可以解决ie9以及以下版本中传参数的问题。运行效果如下所示：

![20210106094018915.png][]

如果去掉重写setTimeout的部分，结果如下所示：

![2021010609392169.png][]

这段代码的核心就在这里：

var __sto = setTimeout;
    window.setTimeout = function(callback,timeout,param){
    　　var args = Array.prototype.slice.call(arguments,2);
    　　var _cb = function(){
    　　    callback.apply(null,args);
    　　}
    　　__sto(_cb,timeout);
    }

重写的时候，给原来的函数取个别名，虽然用不了第二个以外的参数，但是它还是可以传进来的，我们就把它取出来，传递到回调函数中，再调用回调函数，这样就解决了传参问题。

这种办法虽然是一种兼容的办法，但是它破坏了其他浏览器原生setTimeout的方法，看似很好，其实也有一点不好。

其实对于IE浏览器的版本问题，我们还有一种使用IE条件注释判断表达式判断浏览器版本的办法，将重写代码放入HTML中，只有IE浏览器才能识别并起作用。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>settimeout</title>
    </head>
    <body>
        <div id="root">
    
        </div>
        
        <script type="text/javascript">
            function add(a,b){
                return a + b;
            }
            window.onload = function(){
                setTimeout(function(a,b){
                    console.log("a + b = ",add(a,b))
                },1000,3,5);
            }
        </script>
    </body>
    </html>

这种办法的好处就是对于IE内核之外的浏览器，它可以直接使用native的setTimeout。缺点就是他嵌入了HTML中，不能与HTML分离，在大型项目中，需要放在一个全局的HTML页面中，才能不至于哪哪都要加这段代码。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220710/3ea816a28d1a47f1bebd6f0229d31ddc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20220710/3ec54261ed1643b4a5b69bb9cd6ea1de.png
[20210106094018915.png]: /images/20220710/b2f4afff91b84021850aaaba98cab82d.png
[2021010609392169.png]: /images/20220710/521ab0d3c06f48749fd98e789567c9a8.png