javascript|js防抖和节流 javascript|前端

【javascript|js防抖和节流】
js防抖和节流

前言
一、函数防抖
二、函数节流
总结

前言在进行窗口的操作或者输入框操作是，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用评率，同时又不影响实际效果。
一、函数防抖单位时间内，频繁触发一个事件，以最后一次触发为准。
防抖的实现：
1.声明一个全部变量存储定时器ID。
2.每一次触发交互的时候，先清除上一次的定时器，然后开启本次定时器。

//输入框事件 let timeID = null document.querySelector('input').oninput = function () { //1先清除之前的定时器 clearTimeout(timeID) //2.开启本次定时器 timeID = setTimeout(() => { console.log(`发送ajax,搜索的内容是${this.value}`) }, 500) }

二、函数节流单位时间内，频繁触发一个事件，只会触发一次。
节流的实现：
1.声明一个全局变量存储触发事件。
2.每一次触发事件，获取当前时间。
3.判断当前时间与上一次触发事件，是否超过了间隔。
4.如果超过间隔时间，则执行事件处理代码，然后存储本次触发的时间。

//声明一个全局变量存储触发时间 let lastTime = null //页面滚动事件 window.onscroll = function () { //1.每一次触发先获取本次时间戳 let currentTime = Date.now() //2.判断当前时间与上次触发时间是否超过间隔 if (currentTime - lastTime >= 500) { console.log(document.documentElement.scrollTop)//获取滚动距离 //3.存储本次的触发时间 lastTime = currentTime } }

总结函数防抖：
将几次操作合并为一次操作进行。原理是维护一个定时器，规定在延迟时间后触发函数，只有最后一次操作能被触发。
函数节流：
使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
应用场景：
防抖:search联想搜索，用户在不断输入内容的时候，用防抖来节约请求资源。window触发resize时候，不断调整浏览器窗口大小会不断的触发这个事件，用防抖让其只触发一次。
节流：鼠标不断点击（mousedown）触发，让其单位时间内只触发一次。
监听滚动事件，滑到底部自动加载更多。