关于javascript:防抖与节流方法

防抖

防抖是当某一个时间段内屡次触发同一事件时，只执行最初一次触发的事件。其余的事件都会被革除。

function debounce(f, m) {     let time;     return function(){             let arg = Array.prototype.slice.call(arguments, 1);            if(time) {                 clearTimeout(time);             }             time = setTimeout(function(){                     f.apply(this, arg)                    },m)     } } // 测试 function fun(){     console.log("防抖"); } let test = debounce(fun, 1000); window.addEventListener('scroll', test)

节流

节流是在某一个时间段内事件只能被触发一次并执行，如果想再次触发执行需期待下一个工夫周期。

• 办法一

function throttle(f, m) {     let status = true;     return function(){         let arg = Array.prototype.slice.call(arguments, 1);         if(!status) return ;         status = false;         setTimeout(function(){         f.apply(this, arg); status = true;         }, m)      }}      // 测试 function fun(){     console.log("防抖"); } let test = throttle(fun, 1000); window.addEventListener('scroll', test);

• 办法二

function throttle(f, m) {     let lastTime = 0;     return function () {         let arg = Array.prototype.slice.call(arguments, 1);         let newTime = Date.now();         console.log(newTime - lastTime);         if (newTime - lastTime > m) {             setTimeout(function () {                 f.apply(this, arg); }, m);         }        lastTime = newTime;    }; }                // 测试 function fun(){     console.log("防抖"); } let test = throttle(fun, 1000);window.addEventListener('scroll', test);

总结

• 防抖只执行最初一次触发的事件
• 节流只执行工夫周期内第一次触发的事件
• 防抖在时间段内触发屡次函数事件，但会被革除只保留最初一次，并执行
• 节流在时间段内只能触发执行一次事件，如果想再次触发执行将等到下一个工夫周期