简单的节流函数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),这种事件有一个特点,就是用户不必特地捣乱,他在 ...
随机推荐
- 数位dp——BZOJ1026 Windy数
1026: [SCOI2009]windy数 Time Limit: 1 Sec Memory Limit: 162 MB Description windy定义了一种windy数.不含前导零且相邻 ...
- [LC] 83. Remove Duplicates from Sorted List
Given a sorted linked list, delete all duplicates such that each element appear only once. Example 1 ...
- [LC] 91. Decode Ways
A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...
- Java 并发编程面试题
并发编程面试题-内存模型说下内存模型定义为什么要有内存模型为什么要重排序,重排序在什么时候排如何约束重排序规则happens-before什么是顺序一致性CAS 实现的原理,是阻塞还是非阻塞方式?什么 ...
- 发现日志文件和打印在eclipse控制台中的编码不一致
发现日志文件和打印在eclipse控制台中的编码不一致,正好相反. 日志文件是用notepad打开的,notepad有自己的编码方式,查询编码为utf-8,日志文件汉字等等显示正常. 但是在eclip ...
- idea运行时默认显示的index.jsp修改方法
在web.xml中加入以下代码,然后重启服务器就可以了. <welcome-file-list> <welcome-file>这儿写你要显示的页面名称</welcome- ...
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
- ES查询实例
注:转载自https://www.cnblogs.com/yjf512/p/4897294.html 作者:叶剑锋 elasticsearch 查询(match和term) es中的查询请求有两种方式 ...
- Proto3使用指南
这篇指南讲述如何使用Protocol Buffers来结构化你的Protocol Buffer数据,包括.proto文件语法以及如何从.proto文件生成你的访问类型.本文主要涵盖了proto3的语法 ...
- Atom配置(VIM党) · iuunhao
为什么说是Vim党呢?首先我是一个深度的Vim用户,自己的电脑上基本上可以兼容Vim的插件都有,所有浏览器,所有编辑器都是Vim的操作方式,当然包括我现在书写的markdown的软件EME也是兼容的V ...