一道笔试题:利用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);
像这种基本的而且常用的知识还是挺容易考的