JavaScript防抖节流函数
1.直接上码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>debounce-throttle</title>
<script type="text/javascript"> //节流函数：时间戳节流，规定时间内一定执行一次
function throttle(fn, delay){
var prev = Date.now();
return () => {
var context = this,args = arguments;
var now = Date.now();
if(now - prev >= delay){
fn.apply(context, args);
prev = Date.now();
}
};
}
//节流函数：定时器节流，规定时间内一定执行一次
function _throttle(fn, delay){
var timer;
return () => {
var context = this,args = arguments;
if(!timer){
timer = setTimeout(function(){
fn.apply(context, args);
timer=null;
},delay);
}
};
}
//事件触发时立即执行，触发完毕还能执行一次的节流函数：
function __throttle(fn, delay){
var timer,prev = Date.now();
return () => {
var context = this,args = arguments;
var now = Date.now();
clearTimeout(timer);
if(delay - (now - prev) <= 0){
fn.apply(context, args);
prev = Date.now();
}else{
timer = setTimeout(function(){
fn.apply(context, args);
},delay);
}
};
}
//防抖函数：规定一定时间后只执行一次fn
function debounce(fn, delay){
var timer;
return () => {
var context = this,args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
},delay);
};
}
//防抖函数：立即执行然后一定时间后只执行一次fn
function _debounce(fn, delay, flag){
var timer;
return () => {
var context = this,args = arguments;
clearTimeout(timer);
if(flag){
var now = !timer;
timer = setTimeout(function(){
timer = null;
},delay);
if(now){
fn.apply(context, args);
}
}else{
timer = setTimeout(function(){
fn.apply(context, args);
},delay);
}
};
}
function printLog(){
var date = new Date();
var second = date.getSeconds(),milliseconds=date.getMilliseconds();
console.log('printLog:'+second+' ' +milliseconds);
}
window.onload = function(){
document.getElementById('div').addEventListener('click', throttle(printLog,1000));
} </script>
</head>
<body>
<div id="div" style="width:200px;height:160px;background-color: yellow;"></div>
</body>
</html>
2.总结
防止一个事件频繁触发回调函数的方式：
防抖动：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
节流：使得一定时间内只触发一次函数。
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。
原理是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
3.参考资料
https://blog.csdn.net/crystal6918/article/details/62236730
http://www.ptbird.cn/javascript-anti-shake-throttle.html
JavaScript防抖节流函数的更多相关文章
- JS基石之-----防抖节流函数
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...
- vue防抖节流函数---组件封装,防止按钮多次点击
1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...
- vue 防抖节流函数——组件封装
防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...
- Javascript中 节流函数 throttle 与 防抖函数 debounce
问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- vue实现输入框的模糊查询（节流函数的应用场景）
上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...
- 详解防抖函数（debounce）和节流函数（throttle）
本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...
- Javascript性能优化之节流函数
在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了 window.addEventLis ...
- JS奇淫巧技：防抖函数与节流函数
应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...
随机推荐
- TensorFlow数据读取
TensorFlow高效读取数据的方法 TF Boys (TensorFlow Boys ) 养成记(二): TensorFlow 数据读取 Tensorflow从文件读取数据 极客学院-数据读取 十 ...
- URL与URI的区别和联系
转自:https://www.cnblogs.com/chengdabelief/p/6635045.html 简单理解是这样的:理解URI和URL的区别,我们引入URN这个概念. URI = Uni ...
- VMware虚拟机网络设置
背景介绍 在用 VMware workstation 安装好虚拟机后,需要给虚拟机配置网络,配置网络的方法有桥接.NAT. 采用桥接的方法需要占据物理机网段的ip地址,可能会与物理机同一网段的其 ...
- 公司git服务器记录
gitolite:server/web/AmomeWebApp.git gitolite:server/web/AmomeBackendManage.git git@192.168.1.183 === ...
- 过滤器和拦截器filter和Interceptor的区别
1.创建一个Filter过滤器只需两个步骤 创建Filter处理类 web.xml文件中配置Filter 2.Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的 ...
- Codeforces Round #514 (Div. 2) C. Sequence Transformation
题目大意:给你一个n 从1,2,3......n这个序列中 依次进行以下操作:1 .求所有数的最大公因数,放入a序列里面 2 .任意删去一个元素 一直到序列为空 根据删除元素的不同,导致序列a的字典序 ...
- mysql数据库的常用知识
问题一:如果使用可视化工具链接mysql? mysql默认情况下是不支持远程连接的!只需要几个步骤就能轻松搞定了. 1.vi /etc/mysql/my.cnf 修改里面bind-address项,将 ...
- AJAX从入门到放弃（一）
AJAX可以用于创建快速动态的网页(无需重新加载整个网页的情况下,能够更新部分网页的技术) 即异步的Javascript和XML,通过后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新. A ...
- redis复习
一起学习...
- 软件包管理之rpm与yum
软件包的安装和卸载时很平常的事,但在Linux上面却不简单..Linux的其中一个哲学就是一个程序只做一件事,并且做好.组合小程序来完成复杂的任务,这样做有很多好处,但是各个小程序之间往往会存在着复杂 ...