Lodash JS实用类库 数组操作 延时执行 功能强大

npm i -g npm

npm i --save lodash

 

import _ from 'lodash'

我这里 只用了 _.debounce(function(){},300)

300毫秒后，在执行函数方法。

    // 函数延时执行，需要 npm 安装一下
    // query 是输入的内容,done为回调函数,
    // 判断 cities 所有城市列表，是否存在，
    // done 的回调函数，开始执行，过滤，
    // includes  有就是true，没有就是false ，但是字符串区分大小写
    // 原本 是用indexOf(query)>-1 来判断有没有的,
    querySearchAsync: _.debounce(async function (query, cb) {
      const _this = this
      if (_this.cities.length) {
        cb(_this.cities.filter((item) => {
          return item.value.includes(query)
        }))
      } else {
        // 没有cities数据时，那么我们需要请求数据
        const { status, data: { city } } = await _this.$axios.get('/geo/city')
        if (status === 200) {
          _this.cities = city.map((item) => {
            return {
              // 使用map,数据结构改变一下
              value: item.name
            }
          })
          cb(_this.cities.filter((item) => {
            return item.value.includes(query)
          }))
        } else {
          _this.cities = []
        }
      }
    }, 300),