首页 > Web开发 > 详细

JS-防抖与节流

时间:2019-02-18 18:13:55      阅读:295      评论:0      收藏:0      [点我收藏+]

防抖(debounce)

在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。简而言之就是连续的事件,只需触发一次即可。

使用场景有:

  • 搜索框搜索输入。只需用户最后一次输入完,再发送请求
  • 手机号、邮箱验证输入检测
  • 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
  • 快速点击轮播图也需要做处理

 

const _.debounce = (func, wait) => {
  let timer;

  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, wait);
  }
}

VUE.JS 中 使用:

  new Vue({
    el: "#app",
    data: {
      timeout2: null,
    },
    created(){},

    methods: {
      submit() {
        
        // clearTimeout(this.timeout2)  //方法一
        // this.timeout2 = setTimeout(function(){console.log(‘点击‘)},600)  //方法一

        this.debounce2(function(){console.log(‘点击‘)},600,"timeout2")     //方法二 抽离
      },
      debounce2(func, wait, obj) {
        clearTimeout(this[obj])
        this[obj] = setTimeout(func, wait) //返回计时器 ID

      }
    }
  });



 

 

 

节流(throttle)

指限制一个函数在一定时间内只能执行一次。

使用场景:

  • 滚动加载,加载更多或滚到底部监听
  • 谷歌搜索框,搜索联想功能
  • 高频点击提交,表单重复提交

JS-防抖与节流

原文:https://www.cnblogs.com/yangchin9/p/10397031.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!