文章搜索 防抖处理:搜索功能要用到

316 阅读1分钟

防抖:在搜索框 会监听搜索内容的变化,有变化就发送请求,这样比较耗费资源,使用第三方工具包 lodash 的 debounce 方法,在设定的防抖时间内输入内容,不需要发送请求,直到停下搜索,超过设定的时间,才发送请求,没停下之前,一直输入是不会发送请求的

// debounce 函数 // 参数1:函数 // 参数2:防抖时间 // 返回值:防抖之后的函数,和参数1功能是一样的 toutiao-m: views search search-suggess.vue

// 子组件监听父组件搜索框内容的变化
// lodash 支持按需加载,有利于打包结果优化  1、安装 lodash
import { debounce } from "lodash"
  watch: {
    searchText: {
      // handler(value) {
      //   console.log(value)
      //   this.loadSearchSuggess(value) // 调用搜索请求
      // },
      handler: debounce(function (value) {  // debounce 是防抖优化的功能 1、安装 lodash
        // console.log(value)
        this.loadSearchSuggess(value)
      }, 200),
      immediate: true // 该回调将会在侦听开始之后被立即调用
    }
  },