防抖c语言,函数的防抖与节流

防抖和节流的区别防抖:在一定间隔内疯狂触发函数的情况下,函数只执行一次。(至于是一触发,就执行,还是疯狂触发的最后一次执行可以自己控制,一般为了防止延迟,都是选择第一次触发就执行。)假如,我们设定的间隔是500ms,那么在触发间隔小于500ms的都算是疯狂触发函数,只会执行一次。当触发间隔大于500ms后,就会重新计算执行函数。

应用场景:按钮点击

节流:在连续触发函数的一定时间内,根据设置的时间间隔,每过一个时间间隔触发一次函数就是节流。例如,我疯狂触发了一个函数持续1min,设置的时间间隔是500ms,那么这个函数在这1min内,每隔500ms就会执行一次。

应用场景:页面滚动,拖拽防抖代码实现

参数:func :Function,代表要执行的函数(业务)

wait :Number , 代表连续触发的最大时间间隔,默认值500ms

immediate :Boolean,是否一触发就执行,默认值是false定时器方式function debounce(func, wait=500, immediate=false) {  let timer = null;  return function proxy(...params) {let self = this;if (immediate) {

!timer ? func.call(self, ...params) : null;      clearTimeout(timer);

timer = setTimeout(() => {

timer = null;

}, wait);

} else {      clearTimeout(timer);

timer = setTimeout(() => {

timer = null;

func.call(self, ...params);

}, wait);

}

};

}复制代码时间戳function debounce(func, wait=500, immediate=false) {let now = 0;let timer = null;return function proxy(...params) {      let thenow = Date.now();      if (immediate) {

thenow - now >= wait ? func.call(this, ...params) : null;

now = thenow;

} else {clearTimeout(timer);

timer = setTimeout(() => {

timer = null;

func.call(this, ...params);

}, wait);

}

};

}复制代码

我发现好像利用时间戳的方式没有办法实现后执行,只能实现先执行的这种情况。节流代码实现function throttle(func, wait, immediate) {  let now = 0;  let timer = null;  return function proxy(...params) {let thenow = Date.now();let waiting = wait - (thenow - now);if (immediate) {      if (waiting <= 0) {

func.call(this, ...params);

now = thenow;

} else {if (!timer) {

timer = setTimeout(() => {

func.call(this, ...params);

now = Date.now();

timer = null;

}, waiting);

}

}

} else {      if (!timer) {

timer = setTimeout(          () => {

func.call(this, ...params);

now = Date.now();

timer = null;

},

waiting >= 0 ? waiting : wait

);

}

}

};

}复制代码

虽然上面写了立即执行和延迟执行两种,但是一般不会选择延迟执行这种方式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript(简称TS)是一种由微软开发的开源编程语言,它是JavaScript的一个超集,可以编译成纯JavaScript代码。在TS中,我们可以使用装饰器和泛型等特性来封装函数函数函数都是用于控制函数执行频率的方法,常用于优化性能和避免重复触发事件。 函数的作用是在一定时间内,如果事件持续触发,则重新计时,直到事件停止触发后才执行函数。常见的应用场景是输入框搜索联想功能。 函数的作用是在一定时间内,无论事件触发多少次,只执行一次函数。常见的应用场景是滚动加载数据。 下面是一个使用TS封装函数的示例: ```typescript // 函数 function debounce(func: Function, delay: number): Function { let timer: number | null = null; return function (...args: any[]) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { func.apply(this, args); }, delay); }; } // 函数 function throttle(func: Function, delay: number): Function { let timer: number | null = null; return function (...args: any[]) { if (!timer) { timer = setTimeout(() => { func.apply(this, args); timer = null; }, delay); } }; } ``` 使用示例: ```typescript function search(keyword: string) { // 模拟搜索功能 console.log(`Searching for ${keyword}`); } const debouncedSearch = debounce(search, 300); const throttledSearch = throttle(search, 300); debouncedSearch('apple'); debouncedSearch('banana'); debouncedSearch('cherry'); throttledSearch('apple'); throttledSearch('banana'); throttledSearch('cherry'); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值