vue/js 优化代码

Question

if (this.total > 3000) {
    setTimeout(() => {
       this.$refs.multipleTable.doLayout()
    }, 3000)
 }
if (this.total > 4000) {
    setTimeout(() => {
       this.$refs.multipleTable.doLayout()
    }, 4000)
 }
if (this.total > 5000) {
    setTimeout(() => {
      this.$refs.multipleTable.doLayout()
    }, 5000)
 }

上面这段代码重复性很高，请教大神们如何就写成一段！

在这里先感谢各位大神们的解答，小弟感激不尽！

Answer 1

最大延迟 5000、同时是 1000 的整数倍呗？

if (this.total > 3000) {
    let ts = Math.min(parseInt(this.total / 1000) * 1000, 5000);
    setTimeout(() => this.$refs.multipleTable.doLayout(), ts);
}

Answer 2

setTimeout(() => this.$refs.multipleTable.doLayout(), Math.floor(this.total/1000))

Answer 3

function fn (time) {
    if (this.total > time) {
        setTimeout(() => {
               this.$refs.multipleTable.doLayout()
        }, time)
     }
}

根据你的提问，可以转换成这样。但是我觉得这样子可能会触发多次doLayout。
我觉得可以改成下面这样：

function fn () {
     setTimeout(() => {
               this.$refs.multipleTable.doLayout()
        }, Math.floor(this.total / 1000) * 1000)
}

只执行一次doLayout，根据total的值设置定时器的时间。

Answer 4

原来的代码其实存在重复设置setTimeout的问题,
按逻辑，延迟可能是3秒、4秒或者5秒建议改为

if (this.total > 3000) {
    let t=this.total-this.total%1000
    t=t<5000?t:5000
    setTimeout(() => {
       this.$refs.multipleTable.doLayout()
    }, t)
 }

Answer 5

const  list = []
if(xx){
 list.push(xx)
}
if(xxx){
 list.push(xxx)
}
list.forEach(res=> setTimeout(() => {
       this.$refs.multipleTable.doLayout()
    }, res))

Answer 6

setTimeout( () => {
    this.$refs.multipleTable.doLayout()
}, Math.floor(this.total / 1000) * 1000)

Answer 7

        let KEYPOINT = 3000;
        if (this.total > KEYPOINT) {
            let total = Math.floor((this.total - KEYPOINT) / 1000);
            for (let i = 0; i <= total; i++) {
                setTimeout(() => {
                    this.$refs.multipleTable.doLayout();
                }, i * 1000 + KEYPOINT);
            }
        }