防抖与节流

防抖与节流的深入理解

1. 防抖

• 持续触发不执行
• 不触发的一段时间之后再执行

函数防抖，这里的抖动就是执行的意思。即持续触发一个事件，不是一直去执行函数，而是等最后一次触发结束后，过一段时间，再去执行函数。
应用场景：根据输入框内容去查询数据

函数实现：

function debounce(func, delay) {
  let timeout
  return function() {
    clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

调用：

box.onmousemove = debounce(function (e) {
    box.innerHTML = `${e.clientX}, ${e.clientY}`
  }, 1000)

2.节流

• 在一段时间内多次触发只执行一次

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。就是在一段时间内，只执行一次。

函数实现：

function throttle(func, delay) {
    let run = true
    return function () {
      if (!run) {
        return  // 如果开关关闭了，那就直接不执行下边的代码
      }
      run = false // 持续触发的话，run一直是false，就会停在上边的判断那里
      setTimeout(() => {
        func.apply(this, arguments)
        run = true // 定时器到时间之后，会把开关打开，我们的函数就会被执行
      }, delay)
    }
  }

调用：

box.onmousemove = throttle(function (e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`
}, 1000)

在vue中使用防抖函数

新建一个专门写防抖函数的文件func.js

// 防抖函数
export function debounce(fn, delay = 300) { // 默认300毫秒
  var timer
  return function() {
    var args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args) // this 指向vue
    }, delay)
  }
}

   <van-pagination v-model="currentPage" :total-items="50" :show-page-size="3" @change="pageChange"/>

使用：

import { debounce } from './func';
 
export default {
	  data() {
	    return {
	      currentPage: 0
	    }
	  },
    methods: {
        pageChange: debounce(function() {
        //根据点击后的页码 去调用接口获取数据
            console.log(arguments[0],'当前页码')
         })
    }
 }