在Javascript中怎么限制用户高频率操作？

公子航

已于 2023-01-31 09:07:07 修改

阅读量505

点赞数

分类专栏： web前端文章标签： javascript 前端

于 2021-12-29 10:01:09 首次发布

本文链接：https://blog.csdn.net/m0_65315526/article/details/122209201

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

假设有一个pc端的页面，里面有一个移入显示菜单的模块，若用户高频率（非常快速）移入移出菜单，就会出现菜单像抽搐了一样，显示不正常，我相信很多程序猿都出现过类似的现象，这个时候就需要用到防抖与节流了。

什么是防抖？什么是节流？

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次；

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发；

了解了概念之后，那么实际怎么操作呢？

可以使用一个插件，名字叫：lodash.js，官网链接：Lodash 简介 | Lodash 中文文档 | Lodash 中文网

一、防抖

需求：在控制台输出文本框中的内容。

代码：

<body>
  请你输入搜索的内容: <input type="text">
</body>
<script src="../js//lodash.js"></script>
<script>
  let input = document.querySelector("input");
  // 下面代码的意思是，快速输入完了之后1秒后再执行
  input.oninput = _.debounce(function() {
    console.log("ajax发请求了");
  },1000)
</script>

二、节流

需求：每点击一次按钮，数字进行+1。

代码：

<body>
  <div>
    <h1>我是计数器:<span>0</span></h1>
    <button>点我+1</button>
  </div>
</body>
<script src="../js/lodash.js"></script>
<script>
  let span = document.querySelector("span");
  let btn = document.querySelector("button");
  let count = 0;
  // 计数器：在1秒以内执行一次
  btn.onclick = _.throttle(function(){
    count++;
    span.innerHTML = count;
    console.log("执行");
  },1000)
</script>

公子航

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在Javascript中怎么限制用户高频率操作？

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次；节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发；
复制链接

扫一扫