防抖与节流
2021/11/23 23:10:55
本文主要是介绍防抖与节流,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="zh-CN"> <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 class="input1" type="text"> <input class="input2" type="text"> <script> // 1、防抖 var ipt1 = document.querySelector('.input1') var timer1 = null ipt1.addEventListener('input',() => { // 事件触发首先要清除定时器 clearTimeout(timer1) timer1 = setTimeout(()=>{ console.log('防抖') },2000) }) // 2、节流 var timer2 = null var ipt2 = document.querySelector('.input2') ipt2.addEventListener('input',() => { if(timer2) return timer2 = setTimeout(()=>{ console.log('节流') timer2 = null },2000) }) </script> </body> </html>
这篇关于防抖与节流的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-06数据结构和算法面试题详解与实战
- 2024-11-06数据结构与算法面试题详解及练习
- 2024-11-06网络请求面试题详解及实战技巧
- 2024-11-06数据结构和算法面试真题详解及备考指南
- 2024-11-06数据结构与算法面试真题解析与练习指南
- 2024-11-06网络请求面试真题详解及实战攻略
- 2024-11-06数据结构和算法大厂面试真题详解与实战
- 2024-11-06数据结构与算法大厂面试真题详解及入门攻略
- 2024-11-06网络请求大厂面试真题详解及应对策略
- 2024-11-06TS大厂面试真题解析与实战指南