I first asked this question in Stackoverflow, but after two days without a response, i’ve gotten antsy so I am posting the question here as well.
My question is, what do i need to fix so that my implementation of the ember-concurrency Ajax Throttling example works as expected. Specifically, in my implementation no log entries are displayed (as they are on the example page), and the console.log statement that i added in the loopingAjaxTask inner function is not executed nor is the console.log statement in the task. I have copied the example nearly verbatim with the only changes being that i’ve added in those console.log statements.
The line ‘looping Ajax task outer function’ is written to the console 8 times as expected, but the ‘looping Ajax task inner function’ is never written to the console log. The ‘Hello World’ text from the component is written to the page.
I am using ember 4.8 and ember-concurrency 2.3.7.
Here’s the template where i’ve included the AjaxThrottling component.
app/templates/example.hbs
{{page-title "Example"}}
<p>Here's where the log entries should appear</p>
<AjaxThrottling />
{{outlet}}
app/components/ajax-throttling.hbs
<div>
hello world
<ul>
{{#each this.logs as |log|}}
<li style={{color log.color}} {{! template-lint-disable no-inline-styles }}>{{log.message}}</li>
{{/each}}
</ul>
</div>
and here is component’s js page
import Component from '@glimmer/component';
import { enqueueTask, task, timeout } from 'ember-concurrency';
function loopingAjaxTask(id, color) {
console.log('looping Ajax task outer function');
return function* () {
console.log('looping Ajax task inner function');
while (true) {
this.log(color, `Task ${id}: making AJAX request`);
yield this.ajaxTask.perform();
this.log(color, `Task ${id}: Done, sleeping.`);
yield timeout(2000);
}
};
}
export default class AjaxThrottlingComponent extends Component {
tagName = '';
logs = [];
ajaxTask = enqueueTask({ maxConcurrency: 3 }, async () => {
// simulate slow AJAX
console.log('inside the task')
await timeout(2000 + 2000 * Math.random());
return {};
});
@task({ on: 'init' }) task0 = loopingAjaxTask(0, '#0000FF');
@task({ on: 'init' }) task1 = loopingAjaxTask(1, '#8A2BE2');
@task({ on: 'init' }) task2 = loopingAjaxTask(2, '#A52A2A');
@task({ on: 'init' }) task3 = loopingAjaxTask(3, '#DC143C');
@task({ on: 'init' }) task4 = loopingAjaxTask(4, '#20B2AA');
@task({ on: 'init' }) task5 = loopingAjaxTask(5, '#FF1493');
@task({ on: 'init' }) task6 = loopingAjaxTask(6, '#228B22');
@task({ on: 'init' }) task7 = loopingAjaxTask(7, '#DAA520');
log(color, message) {
let logs = this.logs;
logs.push({ color, message });
this.set('logs', logs.slice(-7));
}
}