一道笔试题:利用JS代码实现防抖和节流
防抖 (Debounce)
防抖的目的是在一系列连续的调用中,只有在最后一次调用后的一段时间内没有新的调用才会执行该函数。这对于一些需要在用户停止操作后才执行的场景非常有用,比如输入框的搜索建议。
function debounce(func, wait) { let timeout; return function() { const context = this; const args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { func.apply(context, args); }, wait); }; }
节流 (Throttle)
节流的目的是保证一个函数在一定时间内只被调用一次。这可以确保函数不会因为高频触发而消耗过多资源。例如,当用户滚动页面时,我们可能只想每隔一段时间才更新数据。
function throttle(func, limit) { let inThrottle; return function() { const args = arguments; const context = this; if (!inThrottle) { func.apply(context, args); inThrottle = true; setTimeout(function() { inThrottle = false; }, limit); } }; }
// 使用防抖 const debouncedFunction = debounce(function() { console.log('This will be logged after 500ms of silence.'); }, 500); window.addEventListener('resize', debouncedFunction); // 使用节流 const throttledFunction = throttle(function() { console.log('This will be logged at most once every second.'); }, 1000); window.addEventListener('scroll', throttledFunction);
像这种基本的而且常用的知识还是挺容易考的
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库