在撰写hst-virtuanl-dom的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。过程中，和react的setState一【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net样，我希望合并多个短时间内的update本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】操作。比如在极短的时间内执行了两个upd【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ate，如果每一个update都去刷新界本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。面，这显然是没有必要的。因此，应该考虑一原创内容，盗版必究。【本文受版权保护】种事务机制，来实现将它们合并的目的，即短未经授权，禁止复制转载。未经授权，禁止复制转载。时间内的多个update合并为一个视图的【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。更新。

react的setState是一个很难把【转载请注明来源】未经授权，禁止复制转载。握的操作，它是完全异步的，导致用setS转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。tate更新数据之后，不能马上得到新的数本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。据，比如：

this.setState({ name: 'tony' })
console.log(this.state.name) // 不是tony，而是当前的state.name

要得到新的state值，必须在setSt转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ate的第二个参数中传入一个回调函数，用【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net来得到更新后的state。但是蛋疼的是，著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】如果短时间内执行了多个setState，【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】那么回调中得到的，将是最终的state，【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】而不是当前这个更新的值。

为了解决这个问题，我在写update的时本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。候，分两步走，更新值是同步的，更新视图是著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】异步的。也就是说，在update之后，可【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】以立即使用代码来获取新的值，但是视图不需未经授权，禁止复制转载。【版权所有，侵权必究】要马上更新，而如果视图更新了，可以通过p【版权所有，侵权必究】【版权所有，侵权必究】romise.then进一步进行操作。使【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。用的代码如下：

update({ name: 'tony' }).then(() => {
  console.log(this.data.name) // susan
})
console.log(this.data.name) // tony
update({ name: 'susan' })

上面这段代码看上去非常简单，但是它蕴含了【转载请注明来源】【版权所有】唐霜 www.tangshuang.net一定的思想。即多个update之后，它们then内部的【本文受版权保护】著作权归作者所有，禁止商业用途转载。data是相同的。这一点极为重要，这也就实现update转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】之后，在then内部去得到更新后的视图的【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net可能性，而这个更新不单单包括当前的upd原创内容，盗版必究。【作者：唐霜】ate，还包括短时间内的所有更新（当然，本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】这也带来了不可预测问题，也就是执行了一个【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】操作，可能得到非预期的效果）。

那么具体怎么实现呢？其实代码非常简单：

let transactionResolves = []
let transactionPromises = []
let data = {}
let timer
function update(newData) {
  data = merge(data, newData)
  transactionPromises.push(new Promise(resolve => transactionResolves.push(resolve)))
  if (timer) clearTimeout(timer)
  timer = setTimeout(() => {
    updateView(data)
    transactionResolves.forEach(resolve => resolve())
    transactionResolves = []
    transactionPromises = []
  }, 10)
  return Promise.all(transactionPromises)
}

灰色的两个函数需要自己实现，这里只是把思本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】想表达出来。定义了两个数组，用来存放pr本文作者：唐霜，转载请注明出处。【转载请注明来源】omise和resolve。每一次执行u【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】pdate的时候，先将promise和r【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】esolve存放到数组中。然后用一个se原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。tTimeout/clearTimeou原创内容，盗版必究。本文作者：唐霜，转载请注明出处。t来控制短时间内的重复操作。当更新视图完著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。成之后，执行数组中存放的所有resolv【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.nete函数，这时，Promise.all就会【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net进入到resolved的状态，每一个执行【转载请注明来源】本文版权归作者所有，未经授权不得转载。过的update返回的promise都会【转载请注明来源】【未经授权禁止转载】进入then。

这时一个非常简陋的实现方案，由于js是单著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】线程的，因此并不存在transactio【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】n被其他程序修改的可能。但是setTim【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.neteout会受到性能的影响，如果内部的up【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】dateView执行时间过长，就会导致下【版权所有，侵权必究】【作者：唐霜】一个update排队。当然，这对于视觉上【本文受版权保护】【转载请注明来源】而言并没有太大的影响。

2017-10-07 8957 transaction, Virtual DOM