节流与防抖

  • 节流与防抖已关闭评论
  • 31 次浏览
  • A+
所属分类:Web前端
摘要

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


一、节流

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

  • 类似于技能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)   } }