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

  • 相关阅读:
    在linux下Ant的环境配置
    在linux下Java的环境配置
    CSS列表逆序
    HTML元素基础学习
    第一天---HTML基础学习
    排球计分程序
    罗辑思维:怎样成为一个高手 观后感
    十八周个人作业
    本周个人作业
    个人作业
  • 原文地址:https://www.cnblogs.com/yanze/p/7500386.html
Copyright © 2011-2022 走看看