防抖c语言,函数节流（throttle）和函数防抖（debounce）

问题引入

问题一

如果实现DOM拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微一动一点便会触发大量的回调函数导致浏览器卡死。

问题二

如果给定一个按钮POST请求事件，但在用户有些时候在网络极差的情况下多次点击造次表单按钮的重复提交。

应对以上场景便出现函数防抖和函数节流两个概念，总的来说这两个方法是在时间轴上控制函数的执行次数

函数防抖

概念：在事件被触发N秒后在回调函数，如果在这N秒内又被触发则重新计时

生活中实例： 如果有人进入电梯(触发事件)，电梯将在10秒钟后触发(执行事件监听器)，这时如果又有人进入电梯(在10秒内再次触发该事件)，我们又得等10秒在触发(重新计时)

函数节流

概念：规定一个单位时间，在这个单位时间内只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被多次触发，只能有一次生效

生活中的实例：我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时 ，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放中基本以 每秒 24 张的速度播放。

应用场景

对于函数防抖，有以下几中应用场景

给按钮添加函数防抖防止表单多次提交

对于输入框连续输入进行AJAX验证时，用函数防抖有效减少请求次数

判断scroll 是否滑到底部，滚动事件 + 函数防抖

总的来说，函数防抖适合多次事件一次响应的情况

对于函数节流，有如下几个场景

游戏中的刷新率

DOM元素拖拽

Canvas 画笔功能

**函数节流适合大量事件按事件做平均分配触发

源码

函数防抖

function debounce(fn, wait) {

var timer = null;

return function () {

var context = this

var args = arguments

if (timer) {

clearTimeout(timer);

timer = null;

}

timer = setTimeout(function () {

fn.apply(context, args)

}, wait)

}

}

var fn = function () {

console.log('boom')

}

setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次

setInterval(debounce(fn,2000),1000) // 不会触发一次(我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条)

函数节流

function throttle(fn, gapTime) {

let _lastTime = null;

return function () {

let _nowTime = + new Date()

if (_nowTime - _lastTime > gapTime || !_lastTime) {

fn();

_lastTime = _nowTime

}

}

}

let fn = ()=>{

console.log('boom')

}

setInterval(throttle(fn,1000),10)