JavaScript面试题-函数节流？防抖？

水深无声 2023-05-29 02:50 6阅读 0赞

## 函数节流 ##

一个函数执行一次后，只有大于设定的执行周期后才会执行第二次

function throttle(fun, delay) { 
        let startTime = 0
    
        // this 为 window
        console.log(this)
    	// 将函数作为返回值返回
        return function () { 
            let nowTime = Date.now()
          	// 当时间间隔大于 设定的时间间隔 时调用函数
            if (nowTime -startTime > delay) { 
                // this 为 document
                console.log(this)
    
                fun()
    
                // 修改this 指向将其改为 document 
                // fun.call(this)
    
                startTime = nowTime
    
            }
        }
    
    }
    
    document.onmousemove = throttle(function () { 
        console.log(Date.now())
        // 未修改 this 指向时，this 为 window
        console.log(this)
    }, 3000)

## 防抖 ##

一个需要频繁触发的函数，在规定时间内只让最后一次生效

let txt = document.getElementById('txt')
    
    function debounce(fn, delay) { 
        let timer = null
    
        return function () { 
          	// 先清除定时器 
            clearTimeout(timer)
            // 创建定时器
            timer = setTimeout(function() { 
                // 修改 this 指向
                fn.apply(this)
    
                console.log(this)
    
            }.bind(this), delay)
        }
    }
    txt.onkeyup = debounce(function () { 
        console.log('防抖')
        console.log(this)
    }, 1000)

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript函数节流和函数防抖

一、函数节流函数节流:一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，

喜欢ヅ旅行/ 2023年10月06日 17:54/ 0 赞/ 78 阅读

相关 Javascript面试重点-手写防抖节流函数

文章目录手写防抖节流函数 1. 手写防抖函数 1.1 基本实现 1.2 优化t

末蓝、/ 2023年09月28日 13:12/ 0 赞/ 156 阅读

相关 JavaScript面试题-函数节流？防抖？

函数节流一个函数执行一次后，只有大于设定的执行周期后才会执行第二次 function throttle(fun, delay) { let

水深无声/ 2023年05月29日 02:50/ 0 赞/ 7 阅读

相关防抖函数&节流函数

防抖函数能够控制某个方法的执行次数。如果一个方法在一定时间内的执行次数过多而我们并不需要这个方法执行很多次，我们就可以使用防抖函数来减少函数的执行次数。 //

谁践踏了优雅/ 2022年12月26日 09:22/ 0 赞/ 205 阅读

相关简单节流防抖函数

export default (func, threshold = 500, immediate = false) => { if (typeof fun

╰+哭是因爲堅強的太久メ/ 2022年12月02日 15:09/ 0 赞/ 238 阅读

相关 JavaScript 节流和防抖

JavaScript 节流和防抖 JavaScript 节流和防抖节流 1. 简单的节流函数防抖

向右看齐/ 2022年11月17日 14:59/ 0 赞/ 260 阅读

相关前端面试系列-JavaScript-防抖与节流(用节流优化防抖)

文章目录一.函数防抖二、函数节流 1.时间戳实现 2.定时器实现 3.用节流优化防抖(定时器+时间戳) 三、

刺骨的言语ヽ痛彻心扉/ 2022年11月12日 11:58/ 0 赞/ 220 阅读

相关防抖、节流-JavaScript

防抖、节流防抖(debounce) JS中的防抖是指触发一个事件后，在一段时间内函数只执行一次，如果在这段时间内事件再次被触发，则重新计算这段时间。例如你进公

Love The Way You Lie/ 2022年09月11日 07:19/ 0 赞/ 264 阅读

相关 javaScript中的函数节流与函数防抖

javaScript中的函数节流与函数防抖问题：在实际开发中我们很可能用到resize和mousemove等事件，但是这些会频繁的触发，如果是在对应的事件处理函数写一些

小咪咪/ 2022年05月24日 03:22/ 0 赞/ 231 阅读

相关函数节流-防抖函数

函数节流一个函数执行一次后，只有大于设定的执行周期才会执行第二次，防止高频率的多次执行情景：监听页面滚动时，输出‘我滚动了’，处于优化性能考虑，不希望每次事件触发时

太过爱你忘了你带给我的痛/ 2021年12月20日 08:55/ 0 赞/ 380 阅读