标签：为什么 简单例子 鼠标 实时搜索 ext .com 定时 com date()
在前端开发中，有一部分用户行为会频繁的触发事件，而对于DOM操作，资源加载等耗费性能的处理，很可能会导致卡顿，甚至浏览器的崩溃。防抖和节流就是为了解决这一类的问题。
window.onscroll = function () {
//滚动条位置
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(‘滚动条位置：‘ + scrollTop);
}
从效果上，我们可以看到，在页面滚动的时候，会在短时间内触发多次绑定事件。
我们知道DOM操作是很耗费性能的，如果在监听中，做了一些DOM操作，那无疑会给浏览器造成大量性能损失。
下面我们进入主题，一起来探究，如何对此进行优化。
理解：在车站上车，人员上满了车才发走重点是人员上满触发一次。
原因
定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。
// 计时器
var timer = false;
//
window.onscroll = function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log("防抖");
console.log(new Date());
},300);
};为什么要clearTimeout
每次onscroll的时候，先清除掉计时器.如果不清楚，会导致多次触发的时候，其实是把好多次的处理方法放在某个时间点后一起执行。
比如下面：
for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 3000);
})(i);
}上面代码在3秒后会一起输出 1,2,3,4,5,6,7,8,9
而下面的代码，只会输出9
var timer2 = false;
for (var i = 0; i < 10; i++) {
clearTimeout(timer2);
(function (i) {
timer2 = setTimeout(function () {
console.log(i);
}, 3000);
})(i);
}这是因为，每次我将上次的timer给清除掉了，也就是我如果后面同样有处理函数的话，那我就用后面的定时器。
前面定时器没啥用了，所以直接clearTimeout保证了这种实现。
在解决onscroll问题的时候，如果自己观察console可以发现，防抖保证了滚动停止的时候，才会进行处理，因为滚动停止了，没有scroll事件了，最后一次timer会被保留，从而进行调用
//每一次都要清空定时器，重新设置上计时器值，使得计时器每一次都重新开始，直到最后满足条件并且等待delay时间后，才开始执行handler函数。
let timer ;
window.onscroll = function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
//滚动条位置
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(‘滚动条位置‘+ scrollTop);
timer = null;
},2000)
console.log(timer);//一滚动，timer就有对应的数值，即
//setTimeout会返回数值，clearTimeout(这个数值)，就相当于清除这个定时器效果如下:滚动结束触发事件
// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
// 缓存一个定时器id
let timer = 0
// 这里返回的函数是每次用户实际调用的防抖函数
// 如果已经设定过定时器了就清空上一次的定时器
// 开始一个新的定时器，延迟执行用户传入的方法
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
window.onscroll = debounce(function(){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(‘滚动条位置：‘ + scrollTop);
}
,200)
// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用。这两者的区别，举个栗子来说：
例如在搜索引擎搜索问题的时候，我们当然是希望用户输入完最后一个字才调用查询接口，这个时候适用延迟执行的防抖函数，它总是在一连串（间隔小于wait的）函数触发之后调用。
例如用户给interviewMap点star的时候，我们希望用户点第一下的时候就去调用接口，并且成功之后改变star按钮的样子，用户就可以立马得到反馈是否star成功了，这个情况适用立即执行的防抖函数，它总是在第一次调用，并且下一次调用必须与前一次调用的时间间隔大于wait才会触发。
// 这个是用来获取当前时间戳的
function now() {
return +new Date()
}
/**
* 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行
*
* @param {function} func 回调函数
* @param {number} wait 表示时间窗口的间隔
* @param {boolean} immediate 设置为ture时，是否立即调用函数
* @return {function} 返回客户调用函数
*/
function debounce (func, wait = 50, immediate = true) {
let timer, context, args
// 延迟执行函数
const later = () => setTimeout(() => {
// 延迟函数执行完毕，清空缓存的定时器序号
timer = null
// 延迟执行的情况下，函数会在延迟函数中执行
// 使用到之前缓存的参数和上下文
if (!immediate) {
func.apply(context, args)
context = args = null
}
}, wait)
// 这里返回的函数是每次实际调用的函数
return function(...params) {
// 如果没有创建延迟执行函数（later），就创建一个
if (!timer) {
timer = later()
// 如果是立即执行，调用函数
// 否则缓存参数和调用上下文
if (immediate) {
func.apply(this, params)
} else {
context = this
args = params
}
// 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个
// 这样做延迟函数会重新计时
} else {
clearTimeout(timer)
timer = later()
}
}
}对于==按钮防点击来==说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。
对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数
通过上面的例子，我们知道我们可以通过函数防抖，解决了多次触发事件时的性能问题。
比如，我们在监听滚动条位置，控制是否显示返回顶部按钮时，就可以将防抖函数应用其中。
当我们做图片懒加载（lazyload）时，需要通过滚动位置，实时显示图片时，如果使用防抖函数，懒加载（lazyload）函数将会不断被延时，
只有停下来的时候才会被执行，对于这种需要实时触发事件的情况，就显得不是很友好了。
下面开始介绍函数节流，通过设定时间片，控制事件函数间断性的触发。
理解：大于等于10分钟发一次车，重点是一定间隔时间就会触发一次。
-（即预定一个函数只有在大于等于执行周期时才会执行，周期内不执行）。
定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。
scroll 的一个简单例子
let startTime = Date.now(); //开始时间
let time = 500; //间隔时间
let timer;
window.onscroll = function throttle(){
let currentTime = Date.now();
if(currentTime - startTime >= time){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(‘滚动条位置：‘ + scrollTop);
startTime = currentTime;
}else{
clearTimeout(timer);
timer = setTimeout(function () {
throttle()
}, 50);
}
}- 效果如下：每隔500毫秒触发一次事件
/**
* 节流函数
* @param method 事件触发的操作
* @param mustRunDelay 间隔多少毫秒需要触发一次事件
*/
function throttle(method, mustRunDelay) {
let timer,
args = arguments,
start;
return function loop() {
let self = this;
let now = Date.now();
if(!start){
start = now;
}
if(timer){
clearTimeout(timer);
}
if(now - start >= mustRunDelay){
method.apply(self, args);
start = now;
}else {
timer = setTimeout(function () {
loop.apply(self, args);
}, 50);
}
}
}
window.onscroll = throttle(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(‘滚动条位置：‘ + scrollTop);
},800)上面的代码一刷新就触发事件，即打印出‘滚动条位置"
**
* underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait
*
* @param {function} func 回调函数
* @param {number} wait 表示时间窗口的间隔
* @param {object} options 如果想忽略开始函数的的调用，传入{leading: false}。
* 如果想忽略结尾函数的调用，传入{trailing: false}
* 两者不能共存，否则函数不能执行
* @return {function} 返回客户调用函数
*/
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
// 之前的时间戳
var previous = 0;
// 如果 options 没传则设为空对象
if (!options) options = {};
// 定时器回调函数
var later = function() {
// 如果设置了 leading，就将 previous 设为 0
// 用于下面函数的第一个 if 判断
previous = options.leading === false ? 0 : _.now();
// 置空一是为了防止内存泄漏，二是为了下面的定时器判断
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
// 获得当前时间戳
var now = _.now();
// 首次进入前者肯定为 true
// 如果需要第一次不执行函数
// 就将上次时间戳设为当前的
// 这样在接下来计算 remaining 的值时会大于0
if (!previous && options.leading === false) previous = now;
// 计算剩余时间
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 如果当前调用已经大于上次调用时间 + wait
// 或者用户手动调了时间
// 如果设置了 trailing，只会进入这个条件
// 如果没有设置 leading，那么第一次会进入这个条件
// 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了
// 其实还是会进入的，因为定时器的延时
// 并不是准确的时间，很可能你设置了2秒
// 但是他需要2.2秒才触发，这时候就会进入这个条件
if (remaining <= 0 || remaining > wait) {
// 如果存在定时器就清理掉否则会调用二次回调
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
// 判断是否设置了定时器和 trailing
// 没有的话就开启一个定时器
// 并且不能不能同时设置 leading 和 trailing
timeout = setTimeout(later, remaining);
}
return result;
};
};标签：为什么 简单例子 鼠标 实时搜索 ext .com 定时 com date()
原文地址：https://www.cnblogs.com/chaimi/p/10263066.html
