之前写了前端自动轮播核心,今天来记录一下自动轮播的两个变形,以供参考哦~ 前文传送门:记录常用的前端小技巧 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卸载哦~