“节流函数”提高性能

浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。 高频率的更改会让浏览器崩溃。为了绕开这个问题,需要使用定时器对此类处理函数进行节流

函数节流背后的基本思想:某些代码不可以在没有间隔的情况下连续重复执行

节流函数实现一般实现:1,定时器控制开关,2.定时清除定时器。

var throttle = {    switch:false,    timer:100,    process:function(method,context){        var self = this;        if(self.switch){            return;        }        self.switch = true;        setTimeout(function(){            self.switch = false;            method.call(context);        },self.timer);    }}
function throttle(method,context){    clearTimeout(method.flag);    method.flag = setTimeout(function(){        method.call(context);    },100);}

适用场景:scroll,resize事件还有输入联想词等高频事件。

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2016-01-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

HTML 交互式表单验证

在 HTML 中创建表单总是有点复杂。你首先得将 HTML 标记编写正确,然后需要确保每一个表单项在提交之前都有一个可用的值,最后还需要在有问题时用提醒来告知用...

4763
来自专栏企鹅号快讯

Webpack,请开始你的表演(一)

这是一篇 Webpack 入门文章,之所以写这篇文章,原因有二: 工作和学习中一直在用,但是总有一些内容理解的不够; 自己目前检索到的有关 Webpack 的文...

2157
来自专栏木子昭的博客

Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程 前端: BootStrap, Jquery, Jcro...

3306
来自专栏程序员的知识天地

javascript对点击事件和拖动事件的区分

1.项目中,为了更好的服务用户,经常会设计一个便捷的通道,这个通道一般都是“悬浮”的。

6383
来自专栏游戏杂谈

Flex的UI组件Tile

Tile继承于容器类(Container),有三个属性:direction(子项在容器中的放置样式:水平、垂直)、tileHeight(子项的高度)、tileW...

902
来自专栏Android干货

Android项目实战(四十五):Zxing二维码切换横屏扫描

1875
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

在Android 设备上获取照片、裁剪图片、压缩图片 @TakePhoto V3.0 发布

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) TakePhoto 简介 TakePhoto是一款用...

5096
来自专栏禅林阆苑

vue封装带提示框的单选/多选文本框组件

在web开发中,经常会遇到公共模块复用的问题,例如页头、页脚、导航条等,传统的后端视图引擎如smarty、服务器配置SSI、或是纯前端的嵌套iframe、js请...

1.3K37
来自专栏企鹅号快讯

涨知识,原来可以这样用 CSS 来追踪用户

英文:jbtronics 译文:枫上雾棋 https://segmentfault.com/a/1190000012901505 ? 除了使用 JS 追踪用...

2216
来自专栏Android干货

Android项目实战(四十五):Zxing二维码切换横屏扫描

3638

扫码关注云+社区

领取腾讯云代金券