JavaScript中是否可写出同时间执行的方法的调用?

作者站长头像
站长
· 阅读数 1

在JavaScript 中,如下示例:

// es2015
// 可以参考 Backbone.View
class View {
    constructor() {
        this._data = {
            text: ''
        };
        this._html = '';
    }
    setData(data) {
        this._data = data;
        return this;
    }
    render() { // 牢记纯函数式思维: 输入 => 输出
        return this._html = '<p>' + this._data.text + '</p>';
    }
}

// 建立一个视图
var view = new View();
// 给视图灌入数据, 基于这份数据来渲染视图
view.setData({text: '数据1'}).render();
// 给视图灌入新数据, 不管三七二十一, 重新渲染视图
view.setData({text: '数据2'}).render();
view.setData({text: '数据N'}).render();

我们在调用代码的时候:view.setData({text: '数据1'}).render();明显,这个是同步操作,先执行setData()再执行render()。请问下,1.我们是否可以在JS的类中设计可以同时异步执行的方法呢?在调用时候,两方法都一起执行。2.再加一个final函数,让它们都执行完成之后,会最终触发final函数。类似:view.setData({text: '数据1'}).render().finally((...)=>{...})

回复
1个回答
avatar
test
2024-07-10

就我理解的意思,类似柯里化的思路,可以参考一下我的相关博文。这下面是一种思路,具体要以实际需求调整。

class Test {
  data = {};
  __promises = {};
  setData(obj) {
    this._addPromise((res, rej) => {
      // 为了测试效果,使用了setTimout模拟异步
      setTimeout(() => {
        console.log('setData---')
        this.data = Object.assign(this.data, obj)
        res(1)
      }, 1000)
    })
    
    //...
    return this
  }
  render() {
    this._addPromise((res, rej) => {
      setTimeout(() => {
        console.log('render---:', this.data)
        res(2)
        // this.data = Object.assign(this.data, obj)
      })
      
    })
    
    return this
  }
  _addPromise(fn) {
    const key = new Date().getTime() + ( Math.random() * Math.pow(10,8)) ;
    const prm = new Promise((res, rej) => {
      return fn(res, rej)
    })
    this.__promises[key] = prm
    // 避免key被即时销毁,promise.all注册finally时保证prm存在__promises当中
    setTimeout(() => {
      prm.finally(() => {
        delete this.__promises[key]
      })
    })
  }
  finally(fn) {
    Promise.all(Object.values(this.__promises)).finally( () => fn(this))
  }
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容