绊夏微凉

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

使用input事件进行搜索时准时不准

<div class="m-wrapper03" id="app" v-cloak>
        <div class="close-hosmain close-pf">
            <div class="mycloose">
                <i class="mycloose-img" @click="getHospitalListBy"></i>
                <input type="text" placeholder="搜索医院" class="" style="width: 100%; background: none; font-size: 14px;" @input="searchHospital($event)">
            </div>
        </div>
</div>

<script type="text/javascript">
  var vm = new Vue({
  el: '#app',
  data: function () {
      return {
          name: '福州市',
          provinceCode: 350000,
          cityCode: 350100,
          hospitalList: [],
          prefixList: [],
          totalCount: 0,
          timeoutId: -1
      }
  },
  methods: {
      getHospitalListBy: function () {
          var that = this
          showLoading();
          let param = {
              "provinceCode": this.provinceCode,
              'cityCode': this.cityCode,
          }
          getHospitalListBy(param).then(function (res) {
              that.totalCount = res.total
              if (res.result) {
                  var result = res.result
                  if (result.length > 0) {
                      that.hospitalList = result;
                      for (var item of result) {
                          that.prefixList.push(item.prefix)
                      }
                  }
              }
          })
      },
      searchHospital: function (e) {
          this.prefixList = []
          this.hospitalList = []
          var that = this;
          var searchHosName = e.target.value
          showLoading();
          let param = {
              "provinceCode": this.provinceCode,
              'cityCode': this.cityCode,
          }
          if (that.timeoutId != -1) {
              clearTimeout(that.timeoutId)
          }
          if (searchHosName && searchHosName.trim() != '') {
              param['hosName'] = searchHosName
          }
          that.timeoutId = setTimeout(function () {
              getHospitalListBy(param).then(function (res) {
                  that.totalCount = res.total
                  if (res.result) {
                      var result = res.result
                      if (result.length > 0) {
                          that.hospitalList = result;
                          for (var item of result) {
                              that.prefixList.push(item.prefix)
                          }
                      }
                  }
              })
          }, 500)
      }
  }
})
</script>

setTimeout 返回的是一个ID号。从1开始。
clearTimeout(timeid),会清除掉这个定时函数,但是不会改变id值

posted on 2021-05-31 16:05  绊夏微凉  阅读(234)  评论(0)    收藏  举报