【JS】使用js实现一个简单的函数防抖

Myth丶恋晨 2023-07-23 03:56 7阅读 0赞

**1.概念**  
1.事件响应函数fn在等待一段时间之后才会执行，如果在这个时间段内fn被再次调用，那么会重新计算响应时间。  
**2. 使用节流的case：**  
1.输入框查询  
2.表单验证  
3. 按钮提交事件  
4.scroll滚动事件  
5.resize 事件

/** * @description 节流 * @param fn 传入的回调 * @param wait 间隔多少s执行 * @immediate 是否立即执行还是 */
    function debounce(fn, wait, immediate) { 
        let timer = null;
        let res;
        const debounceObj = function() { 
            let _this = this;
            let args = arguments;
            clearTimeout(timer);
            // 立即执行
            if(immediate) { 
                const callNow = !timer;
                timer = setTimeout(() => { 
                    timer = null;
                }, wait);
                // 立即执行
                if(callNow) { 
                  res = fn.call(_this, ...args);
                }
            // 等待wait 以后才执行
            } else {   
                timer = setTimeout(() => { 
                    fn.call(_this, ...args);
                }, wait);
            }
            return res;
        }
        debounce.cancel = function() { 
            clearTimeout(timer);
            timer = null;
        }
        return debounceObj;
    }
    
    const dom = document.getElementsByClassName('move')[0];

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现防抖

防抖的目的是在一段时间内，只执行一次函数。下面是一个使用 JavaScript 实现防抖的示例： function debounce(fn, delay) {

ゝ一纸荒年。/ 2024年03月27日 12:53/ 0 赞/ 91 阅读

相关 JS防抖函数的实现(巨详细,秒懂)

目录 1.防抖函数的定义 2.防抖函数简单版本的实现 3.防抖函数高阶(第一次调用直接执行,然后等待delay后，才能delay直接执行) 4.防抖函数的案例实现:

左手的ㄟ右手/ 2023年10月10日 22:09/ 0 赞/ 9 阅读

相关【JS】使用js实现一个简单的函数防抖

1.概念 1.事件响应函数fn在等待一段时间之后才会执行，如果在这个时间段内fn被再次调用，那么会重新计算响应时间。 2. 使用节流的case： 1.输入框查询

Myth丶恋晨/ 2023年07月23日 03:56/ 0 赞/ 8 阅读

相关 JS_js实现防抖节流函数

实现防抖函数防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 // func是用户传入需要防抖的函数 // wait是等

我不是女神ヾ/ 2022年11月19日 07:45/ 0 赞/ 209 阅读

相关 js函数防抖

上代码，自己测试。防抖简单说就是减少http请求，前端性能优化 <!DOCTYPE html> <html> <head> <met

小咪咪/ 2022年09月16日 04:54/ 0 赞/ 224 阅读

相关 JS防抖

在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如： 1、window 的 resize、scroll 2

梦里梦外;/ 2022年06月13日 04:16/ 0 赞/ 248 阅读

相关 JS 防抖

没有防抖： var count = 1; var container = document.getElementById('container');

àì夳堔傛蜴生んèń/ 2022年06月06日 02:14/ 0 赞/ 250 阅读

相关 JS函数防抖

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。应用场景： 1. 实时搜索 2. 拖拽当输完nba之

墨蓝/ 2022年05月23日 07:24/ 0 赞/ 232 阅读

相关 JS中使用函数防抖与函数节流

函数防抖原理触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。简单的说，当一个动作连续触发，则只执行最后一次

太过爱你忘了你带给我的痛/ 2021年09月19日 01:12/ 0 赞/ 354 阅读

相关 js实现函数防抖与节流

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。 j...

小灰灰/ 2020年06月02日 12:48/ 0 赞/ 693 阅读