学习笔记|js_防抖与节流（闭包的使用） javascript|html|html5|JavaScript

js的防抖与节流

防抖事件
节流事件
完整的html

防抖事件定义：持续触发事件，一定时间内没有触发事件，事件处理函数只会执行一次，
当设定的时间内触发过一次事件后会重新开始延时。
例：输入框的事件（2s显示内容，不是实时刷新显示内容），对比输入框的内容事件。
实时刷新的效果

实时刷新显示内容 > var inputDom=document.getElementById('leftInput'); inputDom.addEventListener('keyup',function(e){var textDom=document.getElementById('textShow'); console.log(e.target.value); textDom.innerText=e.target.value; })

输入123456会依次打印123456的金字塔

文章图片

【学习笔记|js_防抖与节流（闭包的使用）】防抖（1s内显示输入内容）

防抖（1s内显示输入内容） > // 防抖 var inputDom = document.getElementById('leftInput'); // 函数柯里化 function debounce(delay, callback) {let timer return function(value) {//闭包内存泄漏 clearTimeout(timer) timer = setTimeout(function() {//执行 callback(value) }, delay) } } // 显示内容的函数 function showText(value) {var textDom = document.getElementById('textShow'); console.log(value) textDom.innerText = value; } var debounceFunc = debounce(1000, showText); inputDom.addEventListener('keyup', function(e) {let value = https://www.it610.com/article/e.target.value debounceFunc(value) })

1s内输入123456只会打印一次123456

文章图片

节流事件定义：一段时间直只调用一次事件处理函数
实际用例：提交事件、游戏的技能cd（在游戏cd中点击n次都不会发动技能）

// 节流 var skillDom = document.getElementById('skillTriger'); function throttle(wait,callback) { let timeOut; return function(value) { if (!timeOut) { timeOut = setTimeout(function() { callback(value); //执行一次，时间段内的都不知执行 timeOut = null; }, wait) } } } function skillEvent(value){ var textDom = document.getElementById('skillEventId'); console.log(value) ++count textDom.innerText = value+count; } var skillAc=throttle(3000,skillEvent) var count=0 skillDom.addEventListener('click', function(e) { let value = https://www.it610.com/article/e.target.value skillAc(value) })

文章图片

完整的html

防抖与节流 - 锐客网 > * {margin: 0; padding: 0; }.container {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; background: #262626; display: flex; }.left {position: relative; width: 50%; height: 100%; background: #00cec9; box-sizing: border-box; overflow: hidden; }.right {position: relative; width: 50%; height: 100%; background: #b2bec3; } 防抖（1s内显示输入内容）节流（3s内触发一次） > // 防抖 var inputDom = document.getElementById('leftInput'); // 函数柯里化 function debounce(delay, callback) {let timer return function(value) {//闭包内存泄漏 clearTimeout(timer) timer = setTimeout(function() {//执行 callback(value) }, delay) } } // 显示内容的函数 function showText(value) {var textDom = document.getElementById('textShow'); console.log(value) textDom.innerText = value; } var debounceFunc = debounce(1000, showText); inputDom.addEventListener('keyup', function(e) {let value = https://www.it610.com/article/e.target.value debounceFunc(value) })// 节流 var skillDom = document.getElementById('skillTriger'); function throttle(wait, callback) {let timeOut; return function(value) {if (!timeOut) {timeOut = setTimeout(function() {callback(value); //执行一次，时间段内的都不知执行 timeOut = null; }, wait) } } }function skillEvent(value) {var textDom = document.getElementById('skillEventId'); console.log(value) ++count textDom.innerText = value + count; } var skillAc = throttle(3000, skillEvent) var count = 0 skillDom.addEventListener('click', function(e) {let value = https://www.it610.com/article/e.target.value skillAc(value) })