面试必备之手写节流和防抖函数
2021/12/30 23:09:14
本文主要是介绍面试必备之手写节流和防抖函数,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
面试必备之手写节流和防抖函数
手写防抖函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="height: 1500px;"></div> <script> // 定义:触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间 // 搜索框搜索输入。只需用户最后一次输入完,再发送请求 // 手机号、邮箱验证输入检测 onchange oninput事件 // 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染 //参数:fn -> 要防抖的函数 wait -> 防抖的时间间隔 immediate ->是否立即执行(true为只执行第一次,false为只执行最后一次) const debounce = (fn,wait,immediate) => { let timer = null; return (...args) => { if(timer) clearTimeout(timer); if(immediate && !timer){ fn.call(this,args); } timer = setTimeout(()=>{ fn.call(this,args); },wait) }; }; const betterFn = debounce(() => console.log("防抖执行了"),3000,true); document.addEventListener("scroll",betterFn); </script> </body> </html>
这里监听的是窗口滚动,已经比较简单的体现出防抖的作用。用到了闭包,理解起来可能会有点绕,仔细想想,应该就能相同其中的原理。
手写节流函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 定义:当持续触发事件时,保证间隔时间触发一次事件 // 1.懒加载、滚动加载、加载更多或监听滚动条位置 // 2.百度搜索框,搜索联想功能 // 3.防止高频点击提交,防止表单重复提交 //参数:fn -> 要实现节流的函数 wait -> 要等待执行的间隔 const throttle = (fn,wait) => { let pre = 0; return (...args) => { let now = Date.now(); if(now - pre >= wait){ fn.apply(this,args); pre = now; } } } window.addEventListener("mousemove",throttle((e) => console.log("触发了节流函数",e),2000)); </script> </body> </html>
这里监听的是window窗口中的鼠标移动,也可以很好的展示节流的作用。原理比防抖函数要更好理解,也用到了闭包。
这篇关于面试必备之手写节流和防抖函数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?