一、防抖
防抖:防止用户频繁触发 只执行最后一次
没有防抖代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 防抖 防止用户频繁触发 只执行最后一次 --> <input type="text" name="" id=""> <script> var inp = document.querySelector('input') inp.oninput = function(){ console.log(this.value) } </script> </body> </html>
效果:每次都会触发
加入防抖:
利用 setTimeout() 函数如果之前的触发就会清除 只执行最后一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 防抖 防止用户频繁触发 只执行最后一次 --> <input type="text" name="" id=""> <script> var inp = document.querySelector('input') var t = null; inp.oninput = function(){ if (t !== null){ clearTimeout(t) } t = setTimeout(function(){ console.log(inp.value) },500) // console.log(this.value) } </script> </body> </html>
效果图:
防抖函数:
防抖函数: debounce( fn,delay)
delay :毫秒
function debounce(fn, delay) { var t = null; return function () { if (t !== null) { clearTimeout(t) } } t = setTimeout(() => { fn().call(this) //用call改变用this调用 }, delay) }
调用
window.onscroll = throttle(function(){ console.log(this) },500)
二、节流
节流:控制高频执行次数
没有节流代码:
滚动条执行次数在几秒就到达293次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ height: 5000px; } </style> </head> <body> <div class="box"></div> </body> <script> window.addEventListener('scroll',function(){ console.log("123") }) </script> </html>
有节流代码:
每0.5秒执行一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ height: 5000px; } </style> </head> <body> <div class="box"></div> </body> <script> var f = true window.addEventListener('scroll',function(){ if(f){ setTimeout(function(){ console.log("123") f = true },500) } f = false }) </script> </html>
节流函数: throttle( fn,delay)
delay :毫秒
function throttle(fn, delay) { var valid= true; return function() { if(!valid){ return false; } valid = false; setTimeout(()=>{ fn(); valid = true; },delay) } }
调用
window.onscroll = throttle(function(){ console.log("123") },500)