节流

概念

不断触发事件,但是在指定的单位时间内只触发一次

代码实现

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

<input type="text" id="input">

<script>
  var input = document.querySelector("#input")

  var timer;
  input.onkeyup = function () {
    // 停止操作后才执行1次
    // 如果连续操作,则之前的延迟执行都被清除了

    clearTimeout(timer)
    timer = setTimeout(function () {
      console.log("开始执行搜索...")
    }, 1000);
  }
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresi...
    bounsail阅读 4,776评论 0 1
  • 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代...
    年轻人多学点阅读 3,424评论 0 3
  • 1.首先聊下什么是防抖,什么是节流,在什么场景下会用到。 防抖:防抖是控制次数,指触发事件后,在 n 秒内函数只能...
    kkgo_阅读 2,849评论 1 2
  • 数组扁平化 数组扁平化:使用递归实现 将每一项遍历,如果某一项为数组,则让该项继续调用,这里指定了depth作为扁...
    飞菲fly阅读 4,702评论 0 1
  • 防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题,比如触发频率过高导致的响应速度跟不上触发频率,出现延...
    _SweetHeart阅读 3,060评论 0 1

友情链接更多精彩内容