标签：size rgs ret move settime col function 区别 set
在开发中我们经常需要绑定一些持续触发的事件，如： resize、scroll、mousemove等等，但是我们并不希望在事件触动的过程中去频繁的执行绑定的函数，在这种情况下我们一般有两种解决办法，就是防抖和节流。
防抖
是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
// 防抖 function debounce(func, wait) { let timeout; return function() { let context = this; let args = arguments; if (timeout) { clearTimeout(timeout); } timeout = setTimeout(function () { func.apply(context,args); },wait); }; }; /*使用*/ window.onscroll = debounce(function () { console.log(‘debounce‘); }, 1000);
是指连续触发事件但是在 n 秒中只执行一次函数。
function throttle(func, delay) { let prevTime = Date.now(); return function() { let curTime = Date.now(); if (curTime - prevTime > delay) { func.apply(this, arguments); prevTime = curTime; } }; }; /*使用*/ window.onscroll = throttle(function () { console.log(‘throttle‘); }, 1000);
区别：防抖是在练连续事件完全触发完成之后，只调用一次。节流是在一定时间内只执行一次。
标签：size rgs ret move settime col function 区别 set
原文地址：https://www.cnblogs.com/sloanlv/p/13064768.html
