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

站长

2024年07月10日 09:53 · 阅读数 9

在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个回答

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))
  }
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容