极乐门资源网 Design By www.ioogu.com
面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖
1.节流函数throttle
// 节流方案1,每delay的时间执行一次,通过开关控制 function throttle(fn, delay, ctx) { let isAvail = true return function () { let args = arguments // 开关打开时,执行任务 if (isAvail) { fn.apply(ctx, args) isAvail = false // delay时间之后,任务开关打开 setTimeout(function () { isAvail = true }, delay) } } } // 节流方案2,通过计算开始和结束时间 function throttle(fn,delay){ // 记录上一次函数出发的时间 var lastTime = 0 return function(){ // 记录当前函数触发的时间 var nowTime = new Date().getTime() // 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数 if(nowTime - lastTime > delay){ // 绑定this指向 fn.call(this) //同步时间 lastTime = nowTime } } }
2.防抖debounceTail
2.1)只执行首次
// 防抖 且首次执行 // 采用原理:第一操作触发,连续操作时,最后一次操作打开任务开关(并非执行任务),任务将在下一次操作时触发) function debounceStart(fn, delay, ctx) { let immediate = true let movement = null return function() { let args = arguments // 开关打开时,执行任务 if (immediate) { fn.apply(ctx, args) immediate = false } // 清空上一次操作 clearTimeout(movement) // 任务开关打开 movement = setTimeout(function() { immediate = true }, delay) } }
2.2)只执行最后一次
// 防抖 尾部执行 // 采用原理:连续操作时,上次设置的setTimeout被clear掉 function debounceTail(fn, delay, ctx) { let movement = null return function() { let args = arguments // 清空上一次操作 clearTimeout(movement) // delay时间之后,任务执行 movement = setTimeout(function() { fn.apply(ctx, args) }, delay) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
节流,防抖,函数
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无如何在面试中手写出javascript节流和防抖函数的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]