防抖:在一定的时间内只执行最后一次任务;
节流:一定的时间内只执行一次;
防抖
<button id="debounce">点我防抖!</button> $('#debounce').on('click', debounce()); function debounce() { let timer; // 闭包 return function () { clearTimeout(timer); timer = setTimeout(() => { // 需要防抖的操作... console.log("防抖成功!"); }, 500); } }
节流:
<button id="throttle">点我节流!</button> $('#throttle').on('click', throttle()); function throttle(fn) { let flag = true; // 闭包 return function () { if (!flag) { return; } flag = false; setTimeout(() => { console.log("节流成功!"); flag = true; }, 1000); }; }
到此这篇关于JavaScript的防抖和节流案例的文章就介绍到这了,更多相关JavaScript防抖和节流内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网!
- 本文固定链接: https://zxbcw.cn/post/215913/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)