最大与最小,恰恰相反

98 阅读2分钟

有意思的反向限定

100/3=33.33·······%

  1. 限定最大的值 - Math.min()

在很多项目中我们会遇到类似于进度条之类的,当我们用数据表示进度的时候总是会显示从0%到100%,当这个时候,我们就会遇到一种情况比如有三个接口,因为是异步的,所以加载过程中我们用百分比表示可能就会遇到瓜分不均的情况,那么这时候我们如何来解决呐?

const MAX_NUMBER = 100  //限定最大值
let changeNum = 0   //设定变量并初始化
let count = 3   //随便设定增长次数,因为三次特殊,以此举例
let unit = Math.ceil(100/count)   //变化单元 因为我们用百分比显示,所以设定一个单元变化幅度,并且向上取整。
let timer =null //定时器
function limitRise(baseCount,unit){
    //增长函数
    return Math.min(baseCount+unit,MAX_NUMBER)
}
timer = setInterval(()=>{
    changeNum=limitRise(changeNum,unit)
    if(changeNum===MAX_NUMBER){
        clearInterval(timer)
    }
 },1000)

这样在我们的限定中我们的变量值也不会超过我们设定的限定值,而限定我们的函数确实使用的是Math里面的min函数

  1. 限定最小值 - Math.max()

功能就不多赘述了,直接上代码实例

const MIN_NUMBER = 0  //限定最小值
let changeNum = 100   //设定变量并初始化
let count = 3   //随便设定增长次数,因为三次特殊,以此举例
let unit = Math.ceil(100/count)   //变化单元 因为我们用百分比显示,所以设定一个单元变化幅度,并且向上取整。
let timer =null //定时器
function limitReduce(baseCount,unit){
    //缩减函数
    return Math.max(baseCount-unit,MAX_NUMBER)
}
timer = setInterval(()=>{
    changeNum=limitRise(changeNum,unit)
    if(changeNum===MIN_NUMBER){
        clearInterval(timer)
    }
 },1000)

在这部分逻辑中我们设定变量不停减少但是我们限定住他的最小值那就是使用Mathmax函数

总结

通过上面的方法我们就可以避免使用条件分支去判断数值大小来给他进行赋值,也不需要使用三木运算来优化,直接使用一个内置函数就可以轻松解决这个问题。