防抖:将多次高频操作优化为只在最后一次执行,通常使用的场景是:用户输入,只需再输入完成后做一次输入校验即可。
实现逻辑:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。 实现代码:
// 定时器 const debounce = (fn, ms = 0) => { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => fn.apply(this, args), ms); }; };
节流:每隔一段时间后执行一次,也就是降低频率,将高频操作优化成低频操作,通常使用场景: 滚动条事件 或者 resize 事件,通常每隔 100~500 ms执行一次即可。
实现逻辑:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效 实现代码:
//定时器 const throttle = function (func, delay) { let timeoutId = null; return function (...args) { if (!timeoutId) { timeoutId = setTimeout(function () { func.apply(this, args); timeoutId = null }, delay); } } } // 时间戳 const throttle = function(func, delay) { let prev = Date.now(); return function(...args) { let now = Date.now(); if (now - prev >= delay) { func.apply(this, args); prev = Date.now(); } } }
网友回答文明上网理性发言 已有0人参与
发表评论: