Cytoscape.js eles.style changes update immediately

Question

I am using Cytoscape.js 2.7.15 for my graduation project and i need to make some simple visualizations like changing the labels of nodes.

subjectNode.style('label',myDesiredLabelToshow);

works for me but i am using it in a for loop and when i want to make it slowly or in debug mode to see how my algorithms works to label them, the labels of nodes do not change immediately, they change eventually together after my function ends (i mean hit to end scope of function).

I tried to use cy.batch(); cy.startBatch() even tried to set Timeout but nothing worked.

After tracking cytoscape.js file in debug mode i saw a function o.requestAnimationFrame = function.. after debugger hits that changes are applied on my graph, how can i manually trigger it in my custom functions?

Answer 1

Pretty much any renderer is going to use a render loop using requestAnimationFrame() . That means it's async, and you won't see results while stepping.

The answer is not to use breakpoints or stepping, because those methods assume everything works synchronously.

Use a button in your UI to "step" through points in your algorithm, or use animations in a promise chain to visualise progression. Or forgo showing debugging cues in the UI itself and just use console.log() .