vue开发 window.resize 防抖操作

问题现象描述

初级处理办法（没啥用）

window.addEventListener("resize", () => {
  setTimeout(() => {
 // 需要执行的代码块
},500)
      
      });

只是在里面套了个 setTimeout 这样的结果只是减少了图片闪的频率，但是还是会闪

常规处理办法（防抖）

【1.】先写一个 debounce 防抖函数

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 () {
        // 更新时间戳
        time = +new Date();
        if (!timer) {
          timer = setTimeout(task, delay);
        }
      };
    },

【2.】在 window.resize 里面调用

// 监听页面变化 达到自适应
      window.addEventListener('resize', this.debounce(function(event) {
        //你的代码块
      }, 300));

ok, 大功告成。

完整代码

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: {
            //被选中
            node: function (values, id, selected, hovering) {
              //选中节点的ID
              // console.log('values:'+values+' id:'+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, //是否能拖动节点
          dragView: true, //是否能拖动画布
          hover: true, //鼠标移过后加粗该节点和连接线
          multiselect: true, //按 ctrl 多选
          selectable: true, //是否可以点击选择
          selectConnectedEdges: false, //选择节点后是否显示连接线
          hoverConnectedEdges: true, //鼠标hover节点后是否显示连接线
          zoomView: false, //是否能缩放画布
          tooltipDelay: 200,
        },
      };

      _this.network = new vis.Network(container, data, _this.options);
      _this.listen_double_click();
      _this.listen_click();
      _this.listen_hover();
      _this.listen_blur();

      // 监听页面变化 达到自适应
      window.addEventListener('resize', this.debounce(function(event) {
        _this.network = new vis.Network(container, data, _this.options); //此时事件已经解绑，需要重新绑定一次
        _this.listen_double_click();
        _this.listen_click();
        _this.listen_hover();
        _this.listen_blur();
      }, 300));
    },
    
    //防抖工具函数
    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 () {
        // 更新时间戳
        time = +new Date();
        if (!timer) {
          timer = setTimeout(task, delay);
        }
      };
    },