简单的节流函数throttle
在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制函数被频繁调用的解决方案:
let throttle = function(fn,interval){
let __self = fn,timer,firstTime = true;
return function(){
var args = arguments,__me = this;
if(firstTime){
__self.apply(__me,args);
return firstTime = false;
}
if(timer){
return false;
}
//先执行了一次,firstTime是false,然后500毫秒之后利用定时器再次执行。
timer = setTimeout(function(){
clearTimeout(timer);
timer = null;
__self.apply(__me,args);
},interval||500)
}
}
window.onresize = throttle(function(){
console.log(1)
},500)
此函数可以触类旁通,throttle是个高阶函数,参数输入是个函数【该频繁调用的函数】以及触发时间,第一次触发有个只执行一次的方法,后面接着就是定时器触发函数。节流函数的本质就是利用定时器的延迟进行函数触发。
【完】
后来我才知道,他并不是我的花。只是我恰好途径了他的盛放。
简单的节流函数throttle的更多相关文章
- 关于js节流函数throttle和防抖动debounce
废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...
- JavaScript 节流函数 Throttle 详解
在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏 ...
- Javascript中 节流函数 throttle 与 防抖函数 debounce
问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...
- js 节流函数 throttle
/* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间, ...
- vue实现输入框的模糊查询(节流函数的应用场景)
上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...
- js实现防抖函数和节流函数
防抖函数(debounce) 含义:防抖函数指的是在特定的时间内没有再次触发,才得以进行接下来的函数运行: 用途:当window.onresize不断的调整大小的时候,为了避免不断的重排与重绘,可以用 ...
- (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)
JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce) 函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过 ...
- JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我 ...
- JS的函数节流(throttle)
什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...
随机推荐
- WebService客户端生成方法
1.使用JDK的wsimport.exe产生客户端代码 打开cmd命令框,输入如下格式命令: 格式:wsimport -s "src目录" -p "生成类所在包名&quo ...
- 机器学习算法之——LR(未完成)
LR的形式 sklearn中的LR模块sklearn.linear_model.LogisticRegression LR的目标函数 主要的考虑点有三个:处理什么类型的问题?是否正则以及什么正则?求解 ...
- nonparametric method|One-Mean t-Interval Procedure|
8.4 Confidence Intervals for One Population Mean When σ Is Unknown 原先是 standardized version of x bar ...
- 93)PHP,session代码练习
(1)开启session Session_start(): (2)session值的设定: <?php session_start(); $_SESSION['name']='xiaohua'; ...
- makefile中的变量赋值
在makefile中赋值方式有:'='.':='.'?='和'+='. A = a $(B) B = b all: echo $(A) #运行结果:echo a b a b 这种赋值方式是没有先后顺序 ...
- Jenkins之邮件通知
Jenkins默认有一个邮件通知功能,但功能比较单一,能自定义的东西很少,一般使用Extended E-mail Notification插件来发送邮件,EXT Email插件功能比较多,但设置也比较 ...
- POJ 3522 用不同的排序方式
这是一个蜜汁WA了的代码.. 说好的样例对了就是对了呢orz 反正我个人认为思路是没问题的不知道WA在哪了,丢个坑在这里以后填吧 //思路: //1节点连接的边都记录下来,依次克鲁斯卡尔枚举得出最 ...
- derby常用语法
derby常用语法 以user表为例: 1.创建表 create table user (id int primary key,account varchar(5),name varchar(5),p ...
- numpy的基础计算2
import numpy as np A = np.arange(14,2,-1).reshape((3,4)) #平均值 print(np.mean(A)) print(A.mean()) prin ...
- 图解教你如何使用ANT打包java程序
1:在eclipse中建立如下的工程 值得注意的就是build.xml文件(这个是重点后面会提到) ,其他HelloWorld中的就是一句简单的输出语句 2: 使用build打包(右键然后选择运行), ...