Java教程

再写Javascript闭包

本文主要是介绍再写Javascript闭包,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

     Javascript 闭包, 老生常谈。

     近期遇到问题时,在可编辑表格中键盘快速的上下移动,每次移动会触发change事件,而change事件中执行的是异步访问后台后填充行(且会有多次访问的情况发生,使用Promise数组同步执行)。

此时的现象为,表格中行数据不完整,有的有的没有。

     原来的代码如下:

const rowChangeTasks = []
// 原来的代码,单行逐行填充
arrayValue.forEach((value, idx) => {
    const changeSqls = changesql.split(';')
    changeSqls.forEach(cSQL => {
        const p = () => {
            return new Promise((resolve, reject) => {
                const _this = this
                this.selectedRow = table.tableFullData[theRowIndex + idx]
                this.selectedRow[columnName] = value
                const sql = this.replaceAllParams(cSQL)
                this.ExecCmd({ sql: sql, callName: '表格单元格change事件,执行存储过程', callMethod: 'tableCellDataChangeHandler' }).then(res => {
                    return this.getErrorData(res, 'subtable')
                }).then(res => {
                    if (res && res.length) {
                        const rowData = Object.assign({}, res[0])
                        if (Object.prototype.hasOwnProperty.call(rowData, _this.keyname)) {
                            delete rowData[_this.keyname]
                        }
                        // rowData[this.keyname] = `-${idx + theRowIndex}`
                        const currentColumnObject = {}
                        currentColumnObject[columnName] = value
                        Object.assign(table.tableFullData[theRowIndex + idx], currentColumnObject, rowData)
                        return table.cellDefaultValue(table.tableFullData[theRowIndex + idx], theRowIndex + idx)
                    } else {
                        return Promise.resolve()
                    }
                }).then(() => {
                    table.calcFormulasHandler(table.tableFullData[theRowIndex + idx], columnName) // 计算公式
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
        }
        rowChangeTasks.push(p)
    })
    if (idx) {
        table.tableFullData[theRowIndex + idx][columnName] = value
    }
})
this.common.doPromiseArray(rowChangeTasks).then(() => {
    console.log('结束')
})

且后,我想到了用闭包的方式来处理,新的代码如下:

const rowChangeTasks = []
// 原来的代码,单行逐行填充
arrayValue.forEach((value, idx) => {
    const changeSqls = changesql.split(';')
    changeSqls.forEach(cSQL => {
        const p = ((currentRow, currentRowIndex) => {
            return new Promise((resolve, reject) => {
                const _this = this
                // this.selectedRow = table.tableFullData[theRowIndex + idx]
                currentRow[columnName] = value
                const sql = this.replaceAllParams(cSQL, { selectedRow: currentRow })
                this.ExecCmd({ sql: sql, callName: '表格单元格change事件,执行存储过程', callMethod: 'tableCellDataChangeHandler' }).then(res => {
                    return this.getErrorData(res, 'subtable')
                }).then(res => {
                    if (res && res.length) {
                        const rowData = Object.assign({}, res[0])
                        if (Object.prototype.hasOwnProperty.call(rowData, _this.keyname)) {
                            delete rowData[_this.keyname]
                        }
                        // rowData[this.keyname] = `-${idx + theRowIndex}`
                        const currentColumnObject = {}
                        currentColumnObject[columnName] = value
                        Object.assign(currentRow, currentColumnObject, rowData)
                        return table.cellDefaultValue(currentRow, currentRowIndex)
                    } else {
                        return Promise.resolve()
                    }
                }).then(() => {
                    table.calcFormulasHandler(currentRow, columnName) // 计算公式
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
        })(table.tableFullData[theRowIndex + idx], theRowIndex + idx)
        rowChangeTasks.push(p)
    })
    if (idx) {
        table.tableFullData[theRowIndex + idx][columnName] = value
    }
})
this.common.doPromiseArray(rowChangeTasks).then(() => {
    console.log('结束')
})

用了闭包,有效解决了这个问题。

这篇关于再写Javascript闭包的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!