这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

前言：

大家好啊，又见面了，我是loncon，一个前端路上不断探索的小白，让我们开始今天的主题：项目中常见的节流和防抖。

事件频繁触发可能造成的问题

1、一些浏览器事件： window.onresize window.mousemove等，触发的频率非常搞，会造成浏览器性能问题, onresize 事件会在窗口或框架被调整大小时发生。
2、如果向后台发送请求，频繁触发，对服务器造成不必要的压力.

如何限制事件处理函数频繁调用

1、函数节流 2、函数防抖

函数节流（throttle）

理解：减少一段时间的触发频率 每间隔一段时间调用一次，比如王者里的英雄技能，1s内只能触发一次，手速再快，也是一样的时间 场景： 轮播图按钮，一直点但是就是按照它的时间来

var input = document.querySelector('input')
var flag = true
input.oninput = function(){
    if(flag){
        flag = false
    }
    console.log(input.value)
    setTimeout(function(){
        flag = true
    },1000)
}

函数防抖(debounce)

理解：

一改就发送Ajax请求，发送的请求太多了，需要做防抖处理

函数防抖：

当持续触发事件时，只有一定时间段内没有再触发事件，事件处理函数才会执行一次

如果设定的时间到来之前，又一次触发了事件，就重新开始延时

特征：不会立刻执行，先等等看，在一定时间内没有再次触发，才执行
举例： 英雄回城被打断，需要重新等待。

最基本的写法

var input = document.querySelector('input')
var timeId
input.oninput = function(){
    clearTimeout(timeId)
    setTimeout(function(){
        console.log(this.value)
    },1000)
}

项目优化防抖：

getSuggestion(){
    //调用方法，发送请求，对发送的请求进行防抖处理（延迟执行）
    clearTimeout(this.timeId)
    this.timeId = setTimeout(async () =>{
        //检查当前关键字是否为空
        if(this.keyword === ''){
            this.suggestion = []
            return 
        }
        const res = await reqGetSuggestion(this.keyword)
        this.suggestion = res.data.data.options
    },1000)
}

通过setTimeout的方式，在一定的时间间隔内，将多次触发变成一次触发