标签：ext 频繁 用户 device sed 大小 生效 mouse 判断
在开发中，我们常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，就会加重浏览器的负担，影响用户的体验感，
因此，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。
防抖（debounce）：
function debounce(fn, wait) { var timeout = null;// 使用闭包，缓存变量
return function() {
if(timeout !== null) { console.log(‘清除定时器啦‘) clearTimeout(timeout); //清除这个定时器 } timeout = setTimeout(fn, wait); } } // 处理函数 function handle() { console.log(Math.random()); } var container = document.getElementById(‘container‘) container.addEventListener(‘scroll‘, debounce(handle, 1000));
我们可以发现，当连续触发scroll事件，handle函数只会在1秒时间内执行一次，在如果继续滚动执行，就会清除定时器，重新计时。相当于就是多次执行，只执行一次。
节流（throttle）：
var throttle = function(func, delay) { var timer = null; // 使用闭包，缓存变量 var prev = Date.now(); // 最开始进入滚动的时间 return function() { var context = this; // this指向window var args = arguments; var now = Date.now(); var remain = delay - (now - prev); // 剩余时间 clearTimeout(timer); // 如果剩余时间小于0，就立刻执行 if (remain <= 0) { func.apply(context, args); prev = Date.now(); } else { timer = setTimeout(func, remain); } } } function handle() { console.log(Math.random()); } var container = document.getElementById(‘container‘) container.addEventListener(‘scroll‘, throttle(handle, 1000));
在节流函数内部使用开始时间prev、当前时间now和剩余时间remain，当剩余时间小于等于0意味着执行处理函数，这样保证第一次就能立即执行函数并且每隔delay时间执行一次；
如果还没到时间，就会在remaining之后触发，保证最后一次触发事件也能执行函数，如果在remaining时间内又触发了滚动事件，那么会取消当前的计数器并计算出新的remaing时间。
通过时间戳和定时器的方法，我们实现了第一次立即执行，最后一次也执行，规定时间间隔执行的效果。
总结，看完了防抖和节流的分别介绍，我们来看看他们的区别：
防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。
防抖(debounce)
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流(throttle)
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
本文转载多出，为了让自己看得明白一点。
标签：ext 频繁 用户 device sed 大小 生效 mouse 判断
原文地址：https://www.cnblogs.com/ympjsc/p/11813691.html
