Underscore.js 函数节流简单测试

函数节流在日常的DOM界面数据交互中有比较大的作用，可以减少服务器的请求，同时减少客户端的内存影响

Underscore.js  本省就包含了函数节流的处理函数 

_.throttle 和 _.debounce 

简单的测试使用如下：

需要使用的类库为jquery  、Underscore 

测试的方法为：mousemove 事件

测试页面代码如下：

复制代码
<!DOCTYPE html >
<html>
<head>
    <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="underscore-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#infoapp').on('mousemove', alertinfo);  不使用节流方法

         //   $('#infoapp').on('mousemove', _.throttle(alertinfo, 5000));    使用节流方法  throttle

         //   $('#infoapp').on('mousemove', _.debounce(alertinfo, 1000, false));    使用节流方法debounce
        }
        )
       //  进行回调的事件处理函数
        function alertinfo() {

            var data = new Date();
            console.log(data);
        }
    </script>
</head>
<body>
    <div id="infoapp" style="background-color: Red; width: 200px; height: 200px;   margin:0 auto;">
    </div>
</body>
</html>
复制代码

测试的结果如下：

 

结论：

 总的来说对于我们在密集数据请求的ajax 交互中使用函数节流的方式有很大的帮助，减少了很多的没有必要的数据请求。

 

posted on   荣锋亮  阅读(381)  评论(0)  编辑  收藏  举报

编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
历史上的今天：
2014-06-05 oracle 拆分字符串并转换为表

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示