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 事件,对某些自适应页面调整 ...
随机推荐
- java内存性能调优编码注意
1.没有必要时请不用使用静态变量 使用Java的开发者都知道,当某个对象被定义为stataic变量所引用,这个对象所占有的内存将不会被回收.有时,开发者会将经常调用的对象或者变量定义为static,以 ...
- lwip-动态内存管理
动态内存管理涉及两类重要函数,内存分配函数,内存释放函数,如C语言中的malloc和free. 内存分配的本质是:在事先准好一大块内存堆(可以理解为一个很大的数组)中分配合适的空间,然后将该空间起始地 ...
- jq的事件对象
- 搭建repo服务器和上传源码
https://blog.csdn.net/qq_28449863/article/details/79992191 https://blog.csdn.net/qq_28449863/article ...
- C++与C语言在结构体上的区别
用Nios 实现逻辑上很清楚,只是C++用switch语句后,写的很麻烦,主要是Switch语句很长吧. 另外要记录下:struct在C++中,在a文件中定义在b文件中定义变量是可以的,但在C语言中, ...
- Python开发——1.基础知识
一.开发 开发语言分为高级语言和低级语言 高级语言:Python.Java.PHP.C++.C#.GO.Ruby等:低级语言:C.汇编语言. 高级语言对应的是字节码,是将代码编译成字节码,然后交给机器 ...
- AdminLTE用django部署
前言 最近从网上看到AdminLTE这个web前端的主题挺好的,我平时用python就是写一些后台,准备以后就用这个框架了,这里就是把这个用django初始化一下这个项目. 基础环境介绍 Python ...
- Docker基础-使用Dockerfile创建镜像
1.基本结构 Dockerfile由一行行命令语句组成,并支持以#开头的注释行.例如: # This dockerfile uses the ubuntu image # VERSION 2 - ED ...
- BASH 正则表达式和文本处理工具
本节内容 1. 什么是正则 2. grep 3. sed 4. awk 5. 其他补充 一 什么是正则 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方 ...
- 在Azure DevOps Server (TFS 2019) 流水线传递参数
变量概述 在Azure DevOps Server的流水线中,变量是衔接不同任务和不通代理之间的桥梁,它可以使相对松散.各自独立的任务之间相关影响并共享数据.在流水线中使用变量,可以在各任务之间相互调 ...