文章目录(PS:觉得不错请点赞收藏支持一下)
前言
如上图这是今天老师布置的一个任务,当初次看到任务要求时,对所述的防抖和节流是非常的陌生,第一件事就是去查阅资料了,逛了各种的教程平台,博客平台,结合了一下总结出了本篇文章,总结不易,希望可以得到大家的鼓励,当然有哪里不对的地方还请指出,感谢😊
一、为什么需要使用防抖和节流
实践最容易看清一切,直接给大家示例吧,其实实际应用场景中是浏览器窗口滚动加载、搜索框输入内容,窗口大小拖拽等,为了让大家看的更加清楚,给大家举一个简单的点击按钮例子
-
示例
<body> <!-- 定义一个按钮 --> <button>点击按钮</button> <script> // 获取按钮 var btn = document.querySelector('button') // 绑定点击事件 btn.addEventListener('click', function () { // 控制台输出内容 console.log('欢迎阅读张浔的博客') console.log('----------------') }) </script> </body>
从上图可以发现,点击一次按钮触发一次事件,如果这个事件为发送一个请求,那么这对于服务器来说会加重负担,降低性能,很可能会造成页面的卡顿,导致用户体验非常糟糕,为了优化体验&