js节流防抖的应用场景和在vue中如何实现节流防抖-创新互联

js节流防抖的应用场景和在vue中如何实现节流防抖？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联公司专注于企业成都全网营销推广、网站重做改版、福州网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站制作、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为福州等各大城市提供网站开发制作服务。

函数防抖(debounce)：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

函数节流(throttle)：

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

setTimeout内 this失效：

这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象，看下图 :

打了断点，在Console下输出 this 是Window对象，解决这个问题可以在setTimeout函数外面定义一个 that = this 就可以了，输出 that果然就是该组件的对象

看在vue中的实际代码：

1.输入框，输入最后一个字 2秒后执行（防抖：debounce）：

html:

<input type="text" class="input" v-model="searchText" @keyup="debounce"/>

js：

    debounce: function(){
      let that = this
      if(timer){
        clearTimeout(timer)
      }
      timer = setTimeout(function () {
        console.log('输入')
        timer = undefined;
      },2000)
    }

分享题目：js节流防抖的应用场景和在vue中如何实现节流防抖-创新互联
分享网址：https://www.cdcxhl.com/article36/doeosg.html

成都网站建设公司_创新互联，为您提供Google、做网站、关键词优化、网站建设、商城网站、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联