锐客网

  1. 首页 > it技术 > >

JavaScript防抖与节流的实现与注意事项

目录

  • 概念
  • 实现
  • 测试
  • 注意事项
  • 总结

概念 防抖：点击N次提交按钮，只有最后一次会发出请求。减少无效请求的次数。
节流：每点击一次按钮，都会失效一段时间。降低触发的频率。

实现
/*防抖时限内，只有最后一次调用会执行*/function debounce(func, interval = 0) { let timer; return function () {if (timer) {clearTimeout(timer); }timer = setTimeout(() => {func()}, interval) }}/*节流执行之后会失效一段时间*/function throttle(fn, interval=0, immediate=true) { let valid = true return function () {if (!valid) {return}valid = falseif (immediate) {fn()setTimeout(() => {valid = true; }, interval)} else {setTimeout(() => {fn()valid = true; }, interval)} }}


测试
function say() { console.log(1)}var a = debounce(say, 1000)var b = throttle(say, 1000)var c = throttle(say, 1000, false)

效果：
防抖。
JavaScript防抖与节流的实现与注意事项
文章图片

节流，立即执行。
JavaScript防抖与节流的实现与注意事项
文章图片

节流，延时执行。
JavaScript防抖与节流的实现与注意事项
文章图片


注意事项 原理：闭包。每调用一次都会对应一个闭包。
不能够像下面这样写：

不然：
JavaScript防抖与节流的实现与注意事项
文章图片


总结 【JavaScript防抖与节流的实现与注意事项】到此这篇关于JavaScript防抖与节流的实现与注意事项的文章就介绍到这了,更多相关JS防抖与节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

    推荐阅读


    上一篇：MybatisPlus二级缓存体系探究分析

    下一篇：Mxnet速查_CPU和GPU的mnist预测训练_模型导出_模型导入再预测_导出onnx并预测