博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
你不知道的函数节流,提高你的JS性能!
阅读量:7031 次
发布时间:2019-06-28

本文共 739 字,大约阅读时间需要 2 分钟。

浏览器的DOM计算处理非常耗费CPU时间,霸占内存,这对我们的开发来说是非常不友好的,,比如IE浏览器的onresize事件就可能在用户稍微拖动一下窗口时计算上千次,甚至更高频率直接让浏览器崩溃。。。

手写过轮播图的同学都知道节流阀的存在,那么函数节流亦是如此(参考高程):

var processor = {

       timeoutId :null,

       // 实际进行处理的方法

       performProcessing: function(){

      // 实际执行的代码

      },

      // 初始化处理调用的方法

     process:function(){

        clearTimeout(this.timeoutId);

        var   that=this;

        this.timeoutId=setTimeout(function(){

                that.performProcessing();

        },100);

     }

};

基本思想是:一个连续执行的函数被强制每100毫秒执行一次

下面是用throttle()函数来简化,可以自动进行定时器的设置与清除:

function throttle(method,context){

         clearTimeout(method,tId);

         method.tId=setTimeout(function(){

                method.call(context);

         },100);

}

怎么用呢?就是这么简单粗暴

function myFunction(){

      //your idea

}

window.onresize = function(){

        throttle(myFunction);

};

 

转载于:https://www.cnblogs.com/bug-master/p/6196362.html

你可能感兴趣的文章
EXCEL中计算不重复单元格的个数
查看>>
二层设备与三层设备的区别--总结
查看>>
安装pytorch成功但cuda不可用
查看>>
unity__DrawCall的理解
查看>>
springboot架构下运用shiro后在configuration,通过@Value获取不到值,总是为null
查看>>
SQLServer 数据库镜像+复制切换方案
查看>>
Postman初探
查看>>
仿淘宝头像上传功能(一)——前端篇。
查看>>
Eclipse通过集成svn实现版本控制
查看>>
OS开发过程中常用开源库
查看>>
关于在多个UItextield切换焦点
查看>>
hdu 2768
查看>>
git记住用户名密码
查看>>
ElasticSearch(2)-安装ElasticSearch
查看>>
从mysql数据表中随机取出一条记录
查看>>
ORACLE 锁表处理,解锁释放session
查看>>
深海机器人问题
查看>>
ios开发之 -- invalid nib registered for identifier
查看>>
正则表达式(括号)、[中括号]、{大括号}的区别小结
查看>>
88.NODE.JS加密模块CRYPTO常用方法介绍
查看>>