定时器+时间戳实现防抖和节流

た入场券 2023-01-22 14:55 170阅读 0赞

//防抖，使用定时器
            function debounce(fn, delay) {
                let timer = null
                return function() {
                    if (timer) {
                        clearTimeout(timer)
                    }
                    // timer = setTimeout(fn, delay)
                    //  考虑到this指向和传参的问题
                    let that = this;
                    let args = arguments;
                    timer = setTimeout(function() {
                        fn.apply(that, args)
                    }, delay)
                }
            }
             // 真正的逻辑处理函数
             function print() {
                console.log("逻辑处理");
            }
            window.onscroll = debounce(print, 2000)
            // ------------------------------------------------------
                // 节流,使用时间戳
            function throttle(fn, delay) {
                let start = Date.now();
                return function() {
                    let that = this;
                    let args = arguments;
                    //  获取当前时间，通过 当前时间 - 起点时间 =  时间差，，， 判断 时间差和 delay的关系
                    let diff = Date.now() - start
                    if (diff > delay) {
                        fn.apply(that, args)
                            // 初始化时间
                        start = Date.now()
                    }
                }
            }
            // 真正的逻辑处理函数
            function print() {
                console.log("逻辑处理");
            }
            window.onscroll = throttle(print, 2000)

发表评论取消回复

表情：

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

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

相关阅读

相关定时器+时间戳实现防抖和节流

//防抖，使用定时器 function debounce(fn, delay) { let timer = nu

た入场券/ 2023年01月22日 14:55/ 0 赞/ 171 阅读

相关防抖节流

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

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

相关防抖和节流

防抖是为了防止频繁触发的操作，在指定时间内我们让用户的行为只触发一次在第一次点击时/最后一次点击时（只能识别一次） function debounce(

约定不等于承诺〃/ 2023年01月08日 02:06/ 0 赞/ 141 阅读

相关防抖和节流

防抖（debounce）:当持续触发事件时，保证只执行最后一次事件处理函数 > 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件onmousemo

àì夳堔傛蜴生んèń/ 2022年11月05日 08:32/ 0 赞/ 196 阅读

相关防抖、节流

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

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

相关防抖和节流

防抖所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。触发高频事件后n秒内函数只会执行一次，如果n秒

待我称王封你为后i/ 2022年08月30日 11:37/ 0 赞/ 210 阅读

相关防抖和节流

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

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

相关节流、防抖

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

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

相关防抖和节流

防抖和节流一、什么是防抖二、防抖使用场景 1.输入框是按键触发请求时三、什么是节流四、节流的使用场景 1.鼠标连续

快来打我*/ 2021年09月07日 06:13/ 0 赞/ 471 阅读

相关防抖节流

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

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