微信扫一扫打赏支持

javascript疑难问题---12、函数节流

javascript疑难问题---12、函数节流

一、总结

一句话总结：

函数节流就是 一个函数执行一次后，只有大于设定的执行周期后，才会执行第二次，这样可以防止函数过于频繁的执行，起到节约性能的作用
//2、需求：滚动条事件 每隔200ms才触发一次
/**
 * 1、函数节流
 * @param fn 要执行的回调函数
 * @param delay 时间限制（间隔）
 */
function throttle(fn,delay) {
    //1、记录回调函数两次执行的时间间隔
    var lastTime=0;//函数上一次被执行的时间
    return function () {
        var nowTime=Date.now();
        //2、如果这个时间间隔大于时间限制，那么我们就让回调函数执行
        if(nowTime-lastTime>delay){
            //fn();
            fn.call(this);
            //更新lastTime
            lastTime=nowTime;
        }
    };
}
document.onscroll=throttle(function () {
    console.log('scroll被执行了！： '+Date.now());
},200);

 

 

1、函数节流的作用是什么？

函数节流的作用：性能优化。通过节流函数，可以极大的减少函数执行的次数，从而节约性能。

 

 

2、常见的函数节流应用？

oninput,onkeypress,onscroll,onresize等触发频率非常高的事件

 

 

 

 

二、函数节流

博客对应课程的视频位置：12、函数节流
https://www.fanrenyi.com/video/4/177

 

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>函数节流</title>
 6     <style>
 7         html,body{
 8             height: 500%;
 9         }
10     </style>
11 </head>
12 <body>
13 <!--
14 1、
15 函数节流：
16 一个函数执行一次后，只有大于设定的执行周期后，才会执行第二次
17 
18 2、
19 作用：性能优化
20 比如有个需要频繁触发的函数，出于优化性能角度，在规定时间内，
21 只让函数触发的第一次生效，后面不生效
22 
23 通过节流函数，可以极大的减少函数执行的次数，从而节约性能
24 
25 3、
26 常见的函数节流应用：
27 oninput,onkeypress,onscroll,onresize等触发频率非常高的事件
28 
29 4、
30 函数节流在实际项目中的应用
31 
32 
33 -->
34 <script>
35     //1、滚动条事件例子
36     // document.onscroll=function () {
37     //     console.log('scroll被执行了！： '+Date.now());
38     // };
39 
40     //2、需求：滚动条事件 每隔200ms才触发一次
41     /**
42      * 1、函数节流
43      * @param fn 要执行的回调函数
44      * @param delay 时间限制（间隔）
45      */
46     function throttle(fn,delay) {
47         //1、记录回调函数两次执行的时间间隔
48         var lastTime=0;//函数上一次被执行的时间
49         return function () {
50             var nowTime=Date.now();
51             //2、如果这个时间间隔大于时间限制，那么我们就让回调函数执行
52             if(nowTime-lastTime>delay){
53                 //fn();
54                 fn.call(this);
55                 //更新lastTime
56                 lastTime=nowTime;
57             }
58         };
59     }
60     document.onscroll=throttle(function () {
61         console.log('scroll被执行了！： '+Date.now());
62     },200);
63 </script>
64 </body>
65 </html>

 

 

 

 

 
posted @ 2020-03-19 12:27  范仁义  阅读(154)  评论(0)  编辑  收藏  举报