change事件做延迟处理

change事件会在监听的值发生变化触发,例如input输入搜索,输入3002会触发4次,3、30/300/3002,这样就会不稳定,消耗性能。

解决办法:给change事件做延迟处理,延迟0.3s再触发。

使用工具:webStorm

使用技术:Vue2、antdesign Vue、JS

js中封装方法

let timeout;
let currentValue;

function fetch(value) {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  currentValue = value;

  function fake() {
        window.getGoodsList(value)   //触发的change事件
  }

  timeout = setTimeout(fake, 300);
}

注意:因为外不js不能引用Vue生命周期里的方法,所以需要在Vue生命周期中的create初始化的时候做个转换。
created() {
  window.getGoodsList = this.getGoodsList
},
handleGoodsSearch(e) {  //methods中的方法
  // this.getGoodsList(e)
  fetch(e);
},

你可能感兴趣的:(前端,javascript,vue.js)