• 函数节流简要解析


    在我们实际做项目的过程中,有时需要在拉伸页面时调节弹框位置,这就需要调用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

  • 相关阅读:
    HDU 5521 Meeting
    HDU 5170 GTY's math problem
    HDU 5531 Rebuild
    HDU 5534 Partial Tree
    HDU 4101 Ali and Baba
    HDU 5522 Numbers
    HDU 5523 Game
    ZUFE OJ 2301 GW I (3)
    POJ 2398 Toy Storage
    POJ 2318 TOYS
  • 原文地址:https://www.cnblogs.com/yanze/p/7500386.html
Copyright © 2020-2023  润新知