防抖和节流函数详解（立即执行/非立即执行）

在线查看效果移动鼠标触发

1.防抖（立即执行/非立即执行）

什么是防抖：一个事件在触发后，设置定时器，若n秒内该事件没有再次发生，那么执行这个函数，如果n秒内该事件再次发生了，那么定时器重新开始计时。
应用
- 每次 resize / scroll 触发统计事件
- 文本输入的验证（连续输入文字后发送AJAX请求进行验证，验证一次就好）
1.1 非立即执行版

//防抖(非立即执行)
function debounce_1(fn,wait){var timerId = null;return function(){var context = thisvar args = argumentsclearTimeout(timerId);timerId = setTimeout(() => {fn.apply(context,args)},wait)}
}

1.2 立即执行版

//防抖(立即执行)
function debounce_2(fn,wait){var timerId = null;var flag = true;return function(){var context = thisvar args = argumentsclearTimeout(timerId);if(flag){fn.apply(context, args);flag = false}timerId = setTimeout(() => { flag = true},wait)}
}

1.3 合并版

//防抖(合并版)
function debounce_merge(fn,wait = 500,isImmediate = false){var timerId = null;var flag = true;return function(){var context = thisvar args = argumentsclearTimeout(timerId )if(isImmediate ){if(flag){fn.apply(context,args)flag = false}timerId = setTimeout(function(){flag = true},wait)}else{timerId = setTimeout(function(){fn.apply(context,args)},wait)}}
}

2.节流（立即执行/非立即执行）

什么是节流：若一个函数在一段时间内持续高频触发，节流后将使得该函数在这段时间内每隔固定时间才执行一次
应用
- 与mousemove keyup/keydown 等相密切联系的函数
2.1 非立即执行版

//定义函数
//节流(非立即执行)
function throttle_1(fn,wait){var flag = true;return function(){var context = thisvar args = argumentsif(flag){flag = falsesetTimeout(() => {fn.apply(context,args)flag = true},wait)}}
}

2.2 立即执行版

//节流(立即执行)
function throttle_2(fn,wait){var flag = true;return function(){var context = thisvar args = argumentsif(flag) {fn.apply(context,args);flag = false;setTimeout(() => {flag = true},wait)}}
}

2.3 合并版

//节流(合并)
function throttle_merge(fn,wait = 500,isImmediate = false){var flag = true;return function(){if(flag == true){var context = thisvar args = argumentsflag = falseisImmediate && fn.apply(context,args)setTimeout(() => {!isImmediate && fn.apply(context,args)flag = true},wait)}}
}

3.补充

看文字远不如亲自操作了解得透彻，希望还不太明白的小伙伴在下面演示代码具体操作操作
这里的几个函数都是使用的setTimeout来实现的，也可以使用 Date.now()来实现，思路一样，偷个懒就不写了，嘿嘿；
合并版的 debounce(fn,wait,isImmediate) throttle(fn,wait,isImmediate)

4.演示代码

截图

在线查看效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{height: 1200px;}div{width: 100%;background-color: lightcyan;overflow: hidden;}p{float: left;width: 10px;height:10px;background-color: pink;margin: 1px;}</style>
</head>
<body>防抖(非立即执行) <div id="d1_1"></div>防抖(立即执行) <div id="d1_2"></div>节流(非立即执行) <div id="d2_1"></div>节流(立即执行) <div id="d2_2"></div><!-- 原生 <div id="d3"></div> -->
</body>
<script>
//防抖(非立即执行)
function debounce_1(fn,wait){var timerId = null;return function(){clearTimeout(timerId);timerId = setTimeout(() => {fn.apply(this,arguments)},wait)}
}
//防抖(立即执行)
function debounce_2(fn,wait){var timerId = null;var flag = true;return function(){clearTimeout(timerId);if(flag){fn.apply(this,arguments);flag = false}timerId = setTimeout(() => { flag = true},wait)}
}
//节流(非立即执行)
function throttle_1(fn,wait){var flag = true;return function(){if(flag == true){flag = falsevar timer = setTimeout(() => {fn.apply(this,arguments)flag = true},wait)}}
}
//节流(立即执行)
function throttle_2(fn,wait){var flag = true;var timer = null;return function(){if(flag) {fn.apply(this,arguments);flag = false;timer = setTimeout(() => {flag = true},wait)}}
}//定义事件函数
function debounce_fn1(){ addElement(d1_1) }
function debounce_fn2(){ addElement(d1_2) }
function throttle_fn1(){ addElement(d2_1) }
function throttle_fn2(){ addElement(d2_2) }
// function origin(){ addElement(d3) }//注册事件
var body = document.getElementsByTagName('body')[0]
body.addEventListener("mousemove",debounce_1(debounce_fn1,500))
body.addEventListener("mousemove",debounce_2(debounce_fn2,500))
body.addEventListener("mousemove",throttle_1(throttle_fn1,500))
body.addEventListener("mousemove",throttle_2(throttle_fn2,500))
// body.addEventListener("mousemove",origin)//辅助函数
function addElement(f){var node=document.createElement("p");f.appendChild(node);
}
</script>
</html>

防抖和节流函数详解（立即执行/非立即执行）相关推荐

matlab三次样条曲线的绘制（spline和csape函数详解）
matlab三次样条函数的绘制(spline和csape函数详解) 前言 1.spline函数详解 1.一维非节点边界 2.第二边界条件 3.高维无约束 4.高维第二边界 5.利用第二边界条件绘制圆 ...
【ES6】Generator函数详解
[ES6]Generator函数详解一.Generator函数简介基本概念函数写法 yield关键字介绍二.next方法的参数三.for...of循环四.关于普通throw()与Gener ...
python基础知识~ 函数详解2
python~函数详解2 1 生成器函数定义如果函数有yield这个关键字,就是生成器函数.生成器函数() 获取的是生成器,不执行函数须知 yield和return一样,都可以返回数 ...
scanf函数详解与缓冲区
1.基本信息函数原型: int scanf( char *format, args, ...); 函数返回值: 读入并赋给args的数据个数,遇到文件结束返回EOF,出错返回0. 函数功能: sca ...
linux内核中send与recv函数详解
Linux send与recv函数详解 1.简介 #include <sys/socket.h> ssize_t recv(int sockfd, void *buff, size_t n ...
linux的阻塞waitqueue,Linux阻塞控制 wait_event与wait_event_interruptible函数详解
Linux阻塞控制 wait_event与wait_event_interruptible函数详解最近研究了一下linux驱动对进程的阻塞与非阻塞的控制,感觉linux对进程的控制真的是牛逼,各种进 ...
linux send与recv函数详解
linux send与recv函数详解 1 #include <sys/socket.h> 2 ssize_t recv(int sockfd, void *buff, size_t nb ...
python内置函数教程_Python内置函数详解
此文参考python文档,然后结合自己的理解,写下来,一方面方便自己,让自己好好学习,顺便回忆回忆:另一方面,让喜欢的盆友也参考一下. 经查询,3.6版本总共有68个内置函数,主要分类如下: 数学运算 ...
内核中的kmalloc函数详解
一.kmalloc函数详解 #include <linux/slab.h> void *kmalloc(size_t size, int flags); 给 kmalloc 的第一个参数是 ...

防抖和节流函数详解（立即执行/非立即执行）

1.防抖（立即执行/非立即执行）

2.节流（立即执行/非立即执行）

3.补充

4.演示代码

防抖和节流函数详解（立即执行/非立即执行）相关推荐

最新文章

热门文章