js函数防抖和节流

函数防抖
事件触发后延迟执行动作，适用于频繁触发的事件，如在百度搜索输入搜索内容，输入时不执行搜索，停止输入后经过一小段延迟执行搜索展示搜索结果。
函数防抖的实现关键是对setTimeout函数的应用
此为笔者项目中的搜索例子

// 查询
    searchChange = (val) => {
        if (val) {
            this.setState({ searchVal: val }); //实时变化值
            clearTimeout(this.settimeId);  //如搜索的内容变化在1秒之内，会清除一秒内的请求，记时重新开始
            this.settimeId = setTimeout(() => {
                this.setState({
                    dataUrl: this.urlReplace(this.state.dataUrl, "sfname", val)
                })
            }, 1000);  //让每次要进行请求时先延迟1秒在进行
        } else {
            this.setState({searchVal: '' });
            clearTimeout(this.settimeId);
            this.settimeId = setTimeout(() => {
                this.setState({
                    dataUrl: this.urlReplace(this.state.dataUrl, "sfname", '')
                })
            }, 1000);
        }
    };

函数节流
在固定时间内只触发一次操作，在周期内新事件触发不执行动作。如一秒内重复多次点击提交按钮，只执行一次操作。
实现关键是flag和setTimeout的应用

this.flag = true;
//按钮提交事件
handleSubmit(){
  if(!this.flag) return false;
  this.flag = false;
  setTimeout(()=>{
      console.log("提交");
      this.flag = true;
  },1000);
};