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

  • 相关阅读:
    python(对象与实例属性)
    python(类和对象相关知识)
    python(面向对象设计)
    网络基础知识
    python(hashlib)
    子网掩码划分
    cmd命令
    Linux学习第一天:Linux常用快捷键
    python猜数字小游戏
    while语句
  • 原文地址:https://www.cnblogs.com/yanze/p/7500386.html
Copyright © 2011-2022 走看看