DoneJS StealJS jQuery++ FuncUnit DocumentJS
3.14.1
5.0.0 4.3.0 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-compute
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-stream
      • can-define-stream-kefir
      • can-event
      • can-event/async/async
      • can-event/batch/batch
        • afterPreviousEvents
        • collecting
        • debounce
        • dispatch
        • dispatching
        • queue
        • start
        • stop
      • can-event/lifecycle/lifecycle
      • can-kefir
      • can-list
      • can-map
      • can-map-backup
      • can-map-define
      • can-observation
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
    • Data Modeling
      • can-connect
      • can-connect-cloneable
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-signalr
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-ejs
      • can-element
      • can-react-component
      • can-stache
      • can-stache/helpers/route
      • can-stache-bindings
      • can-stache-converters
      • can-view-autorender
      • can-view-callbacks
      • can-view-href
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-globals
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-control
      • can-dom-events
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-jquery
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-namespace
      • can-reflect
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

start

  • Edit on GitHub

Begin an event batch.

canBatch.start([batchStopHandler])

Parameters

  1. batchStopHandler {function}:

    a callback that gets called after all batched events have been called.

canBatch.start begins an event batch. Until stop is called, any events that would result from calls to [can-event/batch/batch.trigger] to are held back from firing. If you have lots of changes to make to observables, batching them together can help performance - especially if those observables are live-bound to the DOM.

In this example, you can see how the first event is not fired (and their handlers are not called) until canBatch.stop is called.

var person = new DefineMap({
    first: 'Alexis',
    last: 'Abril'
});

person.on('first', function() {
    console.log("First name changed.");
}).on('last', function() {
    console.log("Last name changed.");
});

canBatch.start();
person.first = 'Alex';
console.log('Still in the batch.');
canBatch.stop();

// the log has:
// Still in the batch.
// First name changed.

You can also pass a callback to canBatch.start which will be called after all the events have been fired:

canBatch.start(function() {
    console.log('The batch is over.');
});
person.first = "Izzy"
console.log('Still in the batch.');
canBatch.stop();

// The console has:
// Still in the batch.
// First name changed.
// The batch is over.

Calling canBatch.start multiple times

If you call canBatch.start more than once, canBatch.stop needs to be called the same number of times before any batched events will fire. For ways to circumvent this process, see stop.

Here is an example that demonstrates how events are affected by calling canBatch.start multiple times.

var Todo = DefineMap.extend({
  completed: "boolean",
  name: "string"
  updatedAt: "date",
  complete: function(){
    canBatch.start();
    this.completed = true;
    this.updatedAt = new Date();
    canBatch.end();
  }
});

Todo.List = DefineList.extend({
  "#": Todo,
  completeAll: function(){
    this.forEach(function(todo){
      todo.complete();
    });
  }
});

var todos = new Todo.List([
  {name: "dishes", completed: false},
  {name: "lawn", completed: false}
]);

todos[0].on("completed", function(ev){
  console.log("todos[0] "+ev.batchNum);
})
todos[1].on("completed", function(ev){
  console.log("todos[1] "+ev.batchNum);
});

todos.completeAll();
// console.logs ->
//        todos[0] 1
//        todos[1] 1

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 3.14.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news