防抖与节流

女爷i 2022-01-18 22:55 213阅读 0赞

防抖：是指一段时间内，没有再触发事件，就执行这个事件；如果一段时间内又触发了这个时间，则清空已经间隔的时间，重新开始计时，等待事件触发。

场景：搜索框输入关键字，实时请求后台获取结果。

function func(context) {
        console.log(context);
    }
    function debounce(fn, delay) {
        let timer = null;
        return (args) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn(args);
            }, delay)
        }
    }
    let debounceFunc = debounce(func, 500);
    document.getElementById('input').addEventListener('keyup', function(e){
        debounceFunc(e.target.value)
    });
    复制代码

节流：当连续触发某个事件时，运用节流可以保证在一段时间内，只触发一次事件。

场景：监听滚动事件，做相应操作，比如：懒加载。

function throttle(fn, delay){
        let last, timer;
        return (args) => {
            let now = +new Date();
            if(last && now < last+delay) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    last = now;
                    fn(args);
                }, delay)
            } else {
                fn(args);
                last = now;
            }
        }
    }
    let throttleFunc = throttle(func, 1000);
    document.getElementById('input').addEventListener('keyup', function(e){
        throttleFunc(e.target.value)
    });
    复制代码

转载于:https://juejin.im/post/5ca2dbcaf265da307c13d0d4

发表评论取消回复

表情：

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

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

相关阅读

相关防抖节流

故心故心故心故心小故冲啊 -------------------- 文章目录防抖节流总结 -------------------- 防抖

r囧r小猫/ 2023年01月12日 11:36/ 0 赞/ 95 阅读

相关防抖节流

防抖(debounce) 从滚动条监听的例子说起先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们

叁歲伎倆/ 2022年11月14日 14:41/ 0 赞/ 149 阅读

相关项目防抖与节流

节流 --- 第一个人说了算 // fn是我们需要包装的事件回调, interval是时间间隔的阈值 Function.prototype.throt

你的名字/ 2022年10月01日 07:53/ 0 赞/ 121 阅读

相关防抖与节流

防抖与节流防抖函数防抖的应用场景节流函数节流的应用场景在实际开发中，我们会遇到这么一个场景：我们需要注册

╰半橙微兮°/ 2022年09月16日 11:19/ 0 赞/ 132 阅读

相关防抖、节流

防抖：只要用户触发事件，清除定时器，重新开始记时，避免全局污染，选择使用闭包实现效果。节流：让用户在一段时间之内，只能执行一次。判断当前的tag，tag是true允许执

╰半橙微兮°/ 2022年09月14日 09:23/ 0 赞/ 146 阅读

相关防抖和节流

1. 防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 \ 思路：每次触发事件时都取消之前的延时调用方法 function

朱雀/ 2022年03月18日 01:44/ 0 赞/ 244 阅读

相关节流、防抖

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担节流：尽量减少触发次数，mint-ui上封装了一个方法 <script> var t

向右看齐/ 2022年01月30日 00:39/ 0 赞/ 265 阅读

相关防抖与节流

防抖：是指一段时间内，没有再触发事件，就执行这个事件；如果一段时间内又触发了这个时间，则清空已经间隔的时间，重新开始计时，等待事件触发。场景：搜索框输入关键字，实时请求后台

女爷i/ 2022年01月18日 22:55/ 0 赞/ 214 阅读

相关防抖节流

通过闭包返回的函数来进行操作,使得变量一直存在防抖: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

不念不忘少年蓝@/ 2021年07月24日 23:49/ 0 赞/ 392 阅读

相关防抖节流

vue代码防抖 // timer用于储存定时器 delayed(){ // 检测定时器 if(this.timer){

妖狐艹你老母/ 2021年07月24日 18:39/ 0 赞/ 409 阅读