摘要：当第二次调用该函数时，它会清除前一次的定时器并设置另一个。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。参考文章函数节流与函数防抖函数节流和函数去抖应用场景辨析函数节流函数防抖实现原理分析
前言
事件的触发权很多时候都属于用户，有些情况下会产生问题：
向后台发送数据，用户频繁触发，对服务器造成压力
一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题
如果你碰到这些问题，那就需要用到函数节流和防抖了。
本文首发地址为GitHub博客,写文章不易，请多多支持与关注！
一、函数节流(throttle)函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。
其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环；
html,
body {
height: 500%; // 让其出现滚动条
}
function throttle(fn, delay) {
// 记录上一次函数触发的时间
var lastTime = 0;
return function() {
// 记录当前函数触发的时间
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
// 修正this指向问题
fn.call(this);
// 同步时间
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function() { console.log("scroll事件被触发了" + Date.now()) }, 200)
上例中用到了闭包的特性--可以使变量lastTime的值长期保存在内存中。
2.函数节流的应用场景需要间隔一定时间触发回调来控制函数调用频率：
DOM 元素的拖拽功能实现（mousemove）
搜索联想（keyup）
计算鼠标移动的距离（mousemove）
Canvas 模拟画板功能（mousemove）
射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次
二、函数防抖(debounce)防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。
1.如何实现其原理就第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。
上例中也用到了闭包的特性--可以使变量timer的值长期保存在内存中。
2.函数防抖的应用场景对于连续的事件响应我们只需要执行一次回调：
每次 resize/scroll 触发统计事件
文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）
三、总结函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及防抖多数情况下的应用场景。
参考文章 函数节流与函数防抖 JavaScript 函数节流和函数去抖应用场景辨析 函数节流、函数防抖实现原理分析文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114349.html
摘要：今天和别人聊到函数的节流和防抖，发现自己对这两个的区别很是模糊，遂小小实践一下，在此记录，希望对需要的人有所帮助。防抖实现顺利，但是两个节流方法的执行结果存在差异。 今天和别人聊到JavaScript函数的节流和防抖，发现自己对这两个的区别很是模糊，遂小小实践一下，在此记录，希望对需要的人有所帮助。 节流 - 频繁操作，间隔一定时间去做一件事 举例说明：假定时间间隔为 500ms，频繁...
摘要：文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多，因为这些事件的触发是连续性的，需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文 前言 在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口 s...
阅读 946·2021-09-26 09:55
阅读 3191·2021-09-22 15:36
阅读 2980·2021-09-04 16:48
阅读 3141·2021-09-01 11:41
阅读 2591·2019-08-30 13:49
阅读 1490·2019-08-29 18:46
阅读 3545·2019-08-29 17:28
阅读 3423·2019-08-29 14:11
