记录常用的前端小技巧 react+antDesign 自动轮播的变形

之前写了前端自动轮播核心，今天来记录一下自动轮播的两个变形，以供参考哦~
前文传送门：记录常用的前端小技巧 react+antDesign 自动轮播
偷个懒，使用的还是前文中的样式和
前提条件：现有两个按钮，链接着两个不同的页面，希望以固定周期自动切换；
第一种变形：
默认20s切换一次，如果用户自主操作切换了，那么就60s后再重新启动自动切换。
核心代码：

	autoChangeInterval = null;  
	autoChangeTimeout = null;   
	
	autoChange = (time = 0) => {    //核心自动函数
    	clearInterval(this.autoChangeInterval);
    	clearInterval(this.autoChangeTimeout);
    	this.autoChangeTimeout = setTimeout(()=>{
      		this.autoChangeInterval = setInterval(() => {
        		this.setState({
          			buttonActive: this.state.buttonActive === 1 ? 2 : 1
       				 });
      		}, 40*1000);
    	}, time);
  	};

  showDrawer = () => {
    this.setState({
      buttonActive: 2
    }, ()=>this.autoChange(20*1000));
  };

  onClose = () => {
    this.setState({
      buttonActive: 1
    }, ()=>this.autoChange(20*1000));
  };
  
    componentDidMount() {
    this.autoChange();
  }

简单的说，以上代码就是核心自动函数autoChange调用setTimeout函数和
setInterval函数做定时切换功能，如果用户自动切换的话会调用函showDrawer和onClose，就会给autoChange多加一个参数time，要先耗时time然后才继续里面的时间计算。
说到这里简单的介绍一下setTimeout函数和setInterval函数：
setTimeout(fn,t)就是 超时调用，超过时间t，就执行fn函数，只执行一次。
setInterval(fn,t)就是 间歇调用，调用周期t，执行fn函数，可以执行多次，直到卸载。
其中clearInterval是卸载这两个的函数，其中取消setInterval的重要性要远远高于取消setTimeout，因为在不加干涉的情况下，setInterval将会一直执行到页面卸载。
还有一个小知识分享：(ps:知识过于小白)
就是autoChange = (time = 0) =>中time是个初始值不是赋值哦，如果调用函数给参数了time就是调用函数给的值，如果没有给值就是用的初始值哦~

第二种变形：
鼠标静止20s后就会自动切换，如果鼠标一直动就不会自动切换。
核心代码：

	autoChangeInterval = null;
	
	autoChange = () => {
	    clearInterval(this.autoChangeInterval);
	    this.autoChangeInterval = setInterval(() => {
	      this.setState({
	        buttonActive: this.state.buttonActive === 1 ? 2 : 1
	      });
	    }, 20 * 1000);
	  };
	
	  showDrawer = () => {
	    this.setState({
	      buttonActive: 2
	    });
	  };
	
	  onClose = () => {
	    this.setState({
	      buttonActive: 1
	    });
	  };
	  
	    componentDidMount() {
		    window.addEventListener("mousemove", this.autoChange);
		    this.autoChange();
		  }

		 componentWillUnmount() {
		   window.removeEventListener("mousemove", this.autoChange);
		 }

这个变形呢主要是用的监听函数，如果你鼠标不动，在componentDidMount执行的就是autoChange函数，如果鼠标移动的话就触发了addEventListener监听的mousemove，就会再次调用autoChange函数，相当于你一直动就一直重启定时器，如果你鼠标不动就执行定时器里的内容。这个addEventListener函数不要忘记在componentWillUnmount中要用removeEventListener卸载哦~