wilsonpage / fastdom

Eliminates layout thrashing by batching DOM measurement and mutation tasks
6.83k stars 240 forks source link

[Feature Request] Helpful util to add and clear the last task #93

Open tusharmath opened 8 years ago

tusharmath commented 8 years ago

The usecase is to throttle touchmove events in the dom. As of now we have to schedule it via mutate and then clear it when the next one comes. This can't be done easily and one needs to write a wrapper sort of like this —

function mutateLatest () {
  let id = null
  return function (task) {
   if(id) fastdom.clear(id)
   id = fastdom.mutate(task)
  }
}

The second problem is that it should be performing poorer because of the time complexity of n to remove an element from the queue.

oppianmatt commented 7 years ago

Do you need fastdom to clear? When a touchmove event happens grab the coords (or whatever you need) and save it. Then queue up a raf to process it if it's not queued already. In your processing part that's where you use mutate/measure or whatever. And you won't need to cancel anything.

Like in here https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

Basically you want your scroll/move handlers to be as fast as possible and finish quick. Less work the better. So the most they should do is save some variables and queue up a tick if not already queued. In the tick is where you do you work.