极乐门资源网 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年11月15日
2024年11月15日
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]
- P1X3L《P1X3L》[320K/MP3][143MB]
- 群星.2022-良辰好景知几何电视剧原声带【SONY】【FLAC分轨】
- 庾澄庆.1991-管不住自己【福茂】【WAV+CUE】