zoukankan      html  css  js  c++  java
  • 闭包执行注意(函数节流为例)

    闭包执行注意(函数节流为例)

    一、总结

    一句话总结:

    注意,本例中document.onscroll的时候,执行的不是throttle函数而是throttle函数里面的闭包
    //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、如下代码中,document.onscroll的时候,执行的到底是throttle函数还是throttle函数里面的闭包?

    |||-begin

    //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);

    |||-end

    肯定是执行的throttle函数里面的闭包,因为我是把throttle函数的执行赋值给document.onscroll,那么document.onscroll对应的就是throttle函数的返回值,那个闭包

    二、闭包执行注意(函数节流为例)

    博客对应课程的视频位置:

     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>
     
  • 相关阅读:
    POJ3693 Maximum repetition substring —— 后缀数组 重复次数最多的连续重复子串
    SPOJ
    POJ2774 Long Long Message —— 后缀数组 两字符串的最长公共子串
    POJ3261 Milk Patterns —— 后缀数组 出现k次且可重叠的最长子串
    POJ1743 Musical Theme —— 后缀数组 重复出现且不重叠的最长子串
    SPOJ
    AC自动机小结
    HDU3247 Resource Archiver —— AC自动机 + BFS最短路 + 状压DP
    POJ1625 Censored! —— AC自动机 + DP + 大数
    Herding
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12523235.html
Copyright © 2011-2022 走看看