【js】简单理解节流与防抖,搜索框的场景

在输入框输入时,要搜索某个字符串,基于性能考虑,肯定不能用户没输入一个字符就发送一次搜索请求,一种方法就是等待用户停止输入,比如过了500ms用户都没有再输入,那么就搜索此时的字符串,这就是防抖;节流比防抖宽松一些,比如我们希望给用户一些搜索提示,所以在用户输入过程中,没过500ms就查询一次相关字符串,这就是节流。


节流

防抖的实现思路:每次触发事件时都取消之前的延时调用方法:

var timer = null

    function input1 () {

      clearTimeout(timer)

      timer = setTimeout(function () {

        // ajax()

        console.log(document.getElementById('input1').value)

      }, 500)

    }


防抖

节流的实现思路:每次触发事件时都判断当前是否有等待执行的延时函数:

var flg = false

    function input2 () {

      if (flg) {

        return false

      }

      flg = true

      setTimeout(function () {

        // ajax()

        console.log(document.getElementById('input2').value)

        flg = false

      }, 500)

    }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的...
    燕自浩阅读 5,970评论 0 1
  • 概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执...
    yuanjiex阅读 643评论 0 1
  • 文本函数 DAX中的文本函数和Excel的非常类似,只有一小部分例外。这样的函数有CONCATENATE, EXA...
    PowerBI入门到实践阅读 1,269评论 0 1
  • 红果仔,番樱桃, 五月树上结灯笼。 灯笼仔,红又红, 好似天上太阳公。 红果仔,又名番樱桃,深得羊城儿童喜爱
    珠江潮平阅读 558评论 15 27
  • 一直是一个很愿意不停写下自己心事想法的人 苦于没有合适的地方 只能发在微博里 无数个仅自己可见 愿这里 成为好朋友...
    一追再追Leslie阅读 90评论 0 0