Description of problem phenomena

Primary treatment (not much use)

Window.addEventListener ("resize", () => {setTimeout(() => {// block of code to execute},500)});

I just put a setTimeout inside of it and it just reduces the frequency of the image flashing, but it’s still flashing

Conventional treatment (anti-shake)

【1 】 Write a debounce anti-jitter function first

debounce(fn, delay) { let time = null; let timer = null; let newTime = null; function task() { newTime = +new Date(); if (newTime - time < delay) { timer = setTimeout(task, delay); } else { fn(); timer = null; } time = newTime; } return function () {// update timestamp time = +new Date(); if (! timer) { timer = setTimeout(task, delay); }}; },

[2.] Call in window.resize

// Listen for page changes to adaptive window.addEventListener('resize', this.debounce(function(event) {// Your code block}, 300));

OK, we’re done.

The complete code

init() { let _this = this; var container = document.getElementById("mynetwork"); var data = { nodes: _this.nodes, edges: _this.edges, }; _this.options = { edges: { width: 1, length: 60, shadow: true, smooth: { enabled: false, }, arrows: { to: { enabled: true, scaleFactor: 1, type: "arrow", }, }, color: { color: "#409eff", highlight: "red", hover: "#1fe1c6", inherit: "From ", opacity: 1.0,}, font: {color: "yellow", size: 14, face: "arial", background: "white", strokeWidth: 10, strokeColor: "rgb(112, 184, 240)", align: "horizontal", multi: false, vadjust: 0, bold: { color: "Green ",},},}, nodes: {chosen: {// Selected node: Function (values, id, selected, hovering) {// console.log('values:'+values+' id:'+id+' selected:'+ id+' selected:'+selected); values.shadow = true; },}, shadow: {enabled: false, color: "#409eff", size: 20, x: 0, y: 0,}, shape: "image", font: {bold: { color: "red", }, }, }, physics: { enabled: false, }, interaction: { hover: false, dragNodes: False, // Drag the node dragView: true, // Drag the canvas hover: true, // Throw up the node and the connection line multiselect: true, // Press Ctrl to select Selectable: HoverConnecteDedges: true, // If you can select SelectConnecteDedges: false, // If you can select HoverConnecteDedges: true, // If you can display zoomView: False, // Scalable canvas tooltipDelay: 200,},}; _this.network = new vis.Network(container, data, _this.options); _this.listen_double_click(); _this.listen_click(); _this.listen_hover(); _this.listen_blur(); // Listen for page changes to adaptive window.addEventListener('resize', this.debounce(function(event) { _this.network = new vis.Network(container, data, _this.options); _this.listen_double_click(); // The event has been unbound and needs to be rebound again; _this.listen_click(); _this.listen_hover(); _this.listen_blur(); }, 300)); }, // Buffer debounce(fn, delay) {let time = null; let timer = null; let newTime = null; function task() { newTime = +new Date(); if (newTime - time < delay) { timer = setTimeout(task, delay); } else { fn(); timer = null; } time = newTime; } return function () {// update timestamp time = +new Date(); if (! timer) { timer = setTimeout(task, delay); }}; },