防抖

概念:延时一段时间执行某个动作,当在这段时间内再被触发时,清除掉之前的计时重试计时。

eg. 输入框搜索,就应该用防抖,当我连续不断输入时,不会发送请求;当我一段时间内不输入了,才会发送一次请求;如果小于这段时间继续输入的话,时间会重新计算,也不会发送请。

function debounce (fn, time=300) {
    let timer // 缓存一个定时器对象
    return function (...args) {
        // 当触发时定时器对象存在,则清除重新计时
         timer && clearTimeout(timer)
         timer = setTimeout(() => {
              fn.apply(this, args) // doSomething
              timer = null
          }, time)
    }
}

适用场景:

  • 按钮提交场景:防止多次提交按钮,只执行最后提交的一次
  • 服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 防抖函数就是避免函数多次触发而生成的函数。像仿百度搜索,就应该用防抖,当我连续不断输入时,不会发送请求;当我一段时...
    Samuel_阅读 126评论 0 0
  • 一.什么是函数防抖&节流 函数防抖函数防抖(debounce):在事件被触发n秒后再执行回调,如果在这n秒内又被触...
    王蕾_fd49阅读 450评论 0 1
  • 1、什么是防抖与节流? 节流 : 通俗的讲就是拧紧水龙头让水少流一点,但是不是不让水流了。想象一下在现实生活中有时...
    懂会悟阅读 4,269评论 0 3
  • 说到「函数防抖」和「函数节流」,两者其实概念比较相似。 1.「函数防抖」(debounce)通俗来说,就是把「多个...
    Jason_Shu阅读 657评论 0 0
  • 什么是函数防抖和函数节流 函数防抖(debounce):当事件被触发一段时间后再执行回调,如果在这段时间内事件又被...
    z_yyy阅读 895评论 0 3