防抖(debounce)
当调用动作触发一段时间后,才会执行该动作,若在这段时间间隔内又调用此动作则将重新计算时间间隔。
function debounce(method, timeout, context) { return function() { var args = arguments clearTimeout(method.timer) method.timer = setTimeout(() => { method.apply(context, args) }, timeout) } } function handleResize() { console.log(‘resize‘) } window.onresize = debounce(handleResize, 500, window)
节流(throttle)
预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新的时间周期。
function throttle(method, timeout, context, cycle) { var startTime = +new Date() return function() { var args = arguments var currTime = +new Date() clearTimeout(method.timer) if (currTime - startTime >= cycle) { method.apply(context, args) startTime = currTime } else { method.timer = setTimeout(() => { method.apply(context, args) }, timeout) } } } function handleResize() { console.log(‘resize‘) } window.onresize = throttle(handleResize, 500, window, 2000)
原文地址:https://www.cnblogs.com/zhoulixue/p/11106010.html
时间: 2024-10-29 17:50:51