大家好，欢迎来到IT知识分享网。
<!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> html { height: auto; overflow: scroll; } body { display: flex; flex-direction: row; justify-content: space-between; padding-top: 4rem; } div { width: 48%; overflow: hidden; } </style> <script src="./plugins/lodash4.17.21/lodash.min.js"></script> <script> // 一些频繁触发的事件，我们不想让它频繁执行，比如 keyup scroll resize mousemove // 防抖：动作执行停止后间隔一定的时间执行，应用场景： 搜索框联想 // 节流：不管执行的频率有多高，需要间隔一定的时间执行一次，应用场景：向下滚动加载数据 // 防抖和节流的区别：防抖：不管动作多少次，只有最后一次执行；节流：一段时间内执行多次，但人为地降低了执行的频率 let i_left = 0; let i_right = 0; document.addEventListener("DOMContentLoaded", () => { document.getElementById("input-text-left").addEventListener("keyup", () => { i_left++; console.log("left第" + i_left + "次"); }); document.getElementById("input-text-right").addEventListener( "keyup", _.debounce(function () { i_right++; console.log("right第" + i_right + "次"); }, 800) ); leftBoxEl = document.getElementById("left-box"); rightBoxEl = document.getElementById("right-box"); document.addEventListener("scroll", () => { imgEl = document.createElement("img"); imgEl.src = "./images/1.jpg"; leftBoxEl.appendChild(imgEl); console.log("left共" + leftBoxEl.querySelectorAll("img").length); }); document.addEventListener( "scroll", _.throttle(() => { imgEl = document.createElement("img"); imgEl.src = "./images/1.jpg"; document.getElementById("right-box").appendChild(imgEl); console.log("right共" + rightBoxEl.querySelectorAll("img").length); }, 1000) ); }); </script> </head> <body> <div id="left-box"> <input type="text" id="input-text-left" /> <img src="./images/1.jpg" /> </div> <div id="right-box"> <input type="text" id="input-text-right" /> <img src="./images/1.jpg" /> </div> </body> </html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/31864.html
