防抖和节流解析，并且在vue中的应用

防抖（debounce）
    所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。简单来说就是*防止重复点击触发事件*
    ***代码实现要点：设置一个定时器，通过闭包，抓住定时器变量，控制定时器的添加和清除
    防抖函数分为非立即执行版和立即执行版
           非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
           立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。
    *使用场景：监听滚动、点赞功能
节流（throttle）
    所谓节流，就是指连续触发事件 但是在 n 秒中只触发执行一次函数。节流会稀释函数的执行频率。简单来说就是*指定时间间隔内只会执行一次任务*
    **举例：大家都玩过FPS游戏吧（没玩过？？？打枪知道了吧！）道具的射速是一定的，不会因为你点击鼠标的速度加快而增加。
    ***代码实现要点：通过一个布尔变量作为状态，判断代码是否需要执行
    *使用场景：图片懒加载监听页面的scoll事件，或者监听鼠标的mousemove事件

****如何在vue中使用：
    1.在公共方法中（如 public.js 中），加入函数防抖和节流方法
    2.在需要使用的组件引用  ：import { _debounce } from "@/utils/public";
    3.在 methods 中使用 ：
  methods: {
    changefield: _debounce(function(_type, index, item) {
        // 代码
    }, 200)
}

 

本文地址：https://blog.csdn.net/KeepSober_D/article/details/107492664