zoukankan      html  css  js  c++  java
  • 函数节流简要解析

    在我们实际做项目的过程中,有时需要在拉伸页面时调节弹框位置,这就需要调用window.resize函数,但这也会引发一个问题,

    那就是在极短的时间内,resize内的函数会被执行许多次,造成内存的大量使用甚至浏览器崩溃,同理,在调用mousemove时也会这样。

    为此,在js红宝书内提出了函数节流的概念:

    function throttle(method,context){
                clearTimeout(method.tId);
                method.tId=setTimeout(function(){
                    method.call(context);
                },500);
            }

    具体解决思路如下:

    1.定义执行函数与执行控制函数;

    2.执行控制函数内设置定时器,将执行函数推迟500ms执行,并在每次进入执行控制函数时清除控制器,这样保证执行函数实际上只执行一次

    3.resize内调用控制执行函数。

    function handle(){
        console.log('1')
    }
    function handleCtrl(){
        clearTimeout(handleCtrl.st)
        handleCtrl.st= setTimeout(function(){
            handle()
        }, 500)
    }
    window.onresize= function(){
        handleCtrl()
    }

    其实对于函数节流还有多种方式,但这种方式最为高效简洁,其他不做赘述,

    详情可参考: http://www.cnblogs.com/dolphinX/p/3403821.html

  • 相关阅读:
    DAY 169 创建虚拟环境05
    DAY 168 创建虚拟环境04
    DAY 167 创建虚拟环境03
    DAY 166 创建虚拟环境02
    java 内存区域
    java 内存机制
    JAVA GC
    JAVA根搜索算法
    mysql ---事务
    java lock -----锁
  • 原文地址:https://www.cnblogs.com/yanze/p/7500386.html
Copyright © 2011-2022 走看看