You are on the right track, but the problem is that the onScrollListener gets
called every time your Timeline moves a single pixel.
You want this function to do nothing unless absolutely necessary.
For example, your ajax request is asking test.php for new data for an entire
day. You want to fetch this data once when the user scrolls to a new day, not
every time the user scrolls.
Here's how I approached this problem:
Create the timeline
Fetch data for "today" (9-29-2011)
Add "9-29-2011" to the list of days I've fetched data for (ListOfDays)
onScrollListener = function() {
var currDate = date of timeline()
if (currDate is NOT in ListOfDays) {
add currDate to ListOfDays
fetch new data via ajax for currDate {
update eventSource
tl.layout()
}
}
}
This way, I only load new data if it hasn't been fetched before, and the user
has scrolled the timeline to a date they haven't seen before. It avoids
removing the scrollListener, stopping the timeout, restarting the timeout,
re-adding the scroll listener, hoping the data returns in a reasonable time,
etc. The data is being returned asynchronously anyway, so I don't care how long
it takes to show up. It also avoids race conditions between
window.setTimeout()'s
I don't clear out the event source when fetching new data. Rather I loop over
the returned data, adding/changing/deleting events in the eventSource as
necessary. Creating events from JSON is expensive, so only do it if necessary.
Performance is really excellent with this setup, and most of the time the user
has no idea that data is being loaded on the fly.
--Mike
On Sep 29, 2011, at 8:25 AM, Belfo wrote:
> I progressed putting this code:
>
> var tl;
> var eventSource = new Timeline.DefaultEventSource(0);
> var eventSource2 = new Timeline.DefaultEventSource(0);
> function onLoad() {
>
>
> var theme1 = Timeline.ClassicTheme.create();
> theme1.autoWidth = true;
> theme1.mouseWheel = "default";
> theme1.firstDayOfWeek=1;
>
>
>
>
>
> var bandInfos = [
> Timeline.createBandInfo({
> overview: true,
> width: "10%",
> intervalUnit: Timeline.DateTime.MONTH,
> eventSource: eventSource2,
> theme: theme1,
> intervalPixels: 100,
> timezone: 1
> }),Timeline.createBandInfo({
>
> width: "10%",
> intervalUnit: Timeline.DateTime.DAY,
> //overview: true,
> eventSource: eventSource,
> theme: theme1,
> intervalPixels: 150,
> timezone: 1
> })
>
>
> ];
> bandInfos[0].syncWith = 1;
>
> bandInfos[0].highlight = true;
>
>
>
>
>
> tl = Timeline.create(document.getElementById("tl"),
> bandInfos);
>
> tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(new
> Date()));
> tl.loadJSON("test.php", function(json, url) {
> eventSource2.loadJSON(json, url);
> tl.finishedEventLoading();
> //
> tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(new
> Date()));
>
>
> });
> var da = tl.getBand(1).getCenterVisibleDate();
> var date = new Date(da);
> var day = date.getDate();
> var month = date.getMonth();
> var year = date.getFullYear();
> tl.loadJSON("test.php?d="+day+"&m="+month+"&y="+year,
> function(json, url) {
> eventSource.loadJSON(json, url);
> tl.finishedEventLoading();
>
> tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(new
> Date()));
>
> });
>
> var func2 = function(){
>
> window.clearTimeout(initTimer);
> var topBand = tl.getBand(1);
> topBand.addOnScrollListener( loadData );
> }
> var initTimer=window.setTimeout(func2,3000);
> }
>
>
>
>
> function loadData(){
> var band = tl.getBand(1);
>
> if (band._timer !== false) {
> window.clearTimeout(band._timer);
> band._timer = false;
> }
> var func = function() {
> band.removeOnScrollListener(loadData);
> window.clearTimeout(band._timer);
> band._timer = false;
> var eventSource = band.getEventSource();
> eventSource.clear();
> var da = band.getCenterVisibleDate();
> //alert(da);
> var date = new Date(da);
> var day = date.getDate();
> var month = date.getMonth();
> var year = date.getFullYear();
> tl.loadJSON("test.php?d="+day+"&m="+month
> +"&y="+year, function(json, url) {
> eventSource.loadJSON(json, url);
> tl.finishedEventLoading();
>
> });
> tl.layout();
> band.addOnScrollListener(loadData);
> };
> band._timer = window.setTimeout(func,3000);
>
>
> }
>
>
>
>
>
> var resizeTimerID = null;
> function onResize() {
> if (resizeTimerID == null) {
> resizeTimerID = window.setTimeout(function() {
> resizeTimerID = null;
> tl.layout();
> }, 500);
> }
> }
>
>
> The problem is i must set a timeout large enough to be sure the data
> is loaded (and can be long (4s) when passing through reverse proxy/
> firewall) otherwise it start calling the test.php page infinitely.
> Also with this solution, when scrolling i wait the settled second
> before start to showing data.
>
> --
> You received this message because you are subscribed to the Google Groups
> "SIMILE Widgets" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/simile-widgets?hl=en.
>
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
