一、节流

• 概念：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。

  

  成都创新互联长期为千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为文圣企业提供专业的成都做网站、成都网站设计，文圣网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

• 类似于技能CD。

• 应用：点击按钮，轮播图点击左右箭头。

• 插件lodash.js，它里面封装了函数的防抖与节流业务。

  <p>计数器：<span>0</span></p>
  <button>+1</button>
  // 获取元素
  let span = document.querySelector('span')
  let btn = document.querySelector('button')
  let count = 0
  let timer = null
  // 控制节流阀是否开启或关闭
  let flag = true
  // 需求：在一秒以内，不管点击按钮多少次，计数器数值只能+1
  btn.onclick = function () {
    if (flag) {
      flag = false
      timer = setTimeout(() => {
        count++
      	span.innerHTML = count
          flag = true
      }, 1000)
    }
  }
  

二、防抖

• 概念：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次。

• 类似于LOL回城被打断。

• 应用：输入框搜索。

• 插件lodash.js，它里面封装了函数的防抖与节流业务。

  <input type="text" @input="inputFn" />
  data () {
    return {
      timer: null
    }
  },
  methods: {
    inputFn () {
      if (this.timer) {
  	clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
  	// 发送网络请求
      }, 3000)
    }
  }
  

标题名称：节流与防抖
链接分享：https://www.cdcxhl.com/article40/dsojiho.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、软件开发、品牌网站设计、网站营销、网页设计公司、商城网站

广告

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