# Delay:延迟处理

使用场景:按键输入,自动搜索时,降低调用后端接口的频次。 import {Delay} from 'sjfx';

# 主要代码

//需要定义计时器归0后的回调
this.delay = new Delay(() => {
	this.search();
});

//内容改变时触发trigger方法,重置剩余时间
trySearch() {
	this.delay.trigger();
},

//组件销毁时,需要销毁实例,以免内存无法释放
destroyed() {
	this.delay.destroy()
}

# 完整实例

<template>
  <div>
    <vendor-header></vendor-header>
    <div class="backWhite">
      <div class="main-search-show">
        <div class="main-search-show-con clearRadius"><input type="search" v-model="keyword"
                                                             class="main-search-show-text"
                                                             placeholder="点击搜索" @keyup="trySearch"></div>
      </div>
	  <!--省略代码-->
    </div>
  </div>
</template>

<script>
  import Config from '../config';
  import {Ajax, Global, Delay} from 'sjfx';
  import {rollingData, rollingLoad} from 'sjfx/mobile';

  export default {
    name: "store_list",
    data() {
      return {
        keyword: '',
        store: new rollingData({
          api: Config.apiUrl('/tenant/api/v1/tenant/wechatapp/shop/list-distance'),
          limit: 20,
          paras: {}
        }),
        loading: false,
        searchPara: {},
        delay: undefined
      }
    },

    created() {
      this.load();
      this.delay = new Delay(() => {
        this.search();
      });
    },

    methods: {
      /**
       * 加载List数据
       */
      load: function () {
        this.store.load().then(data => {
          convert(data);
          //设置距离的显示文本
          if (this.store.isEnd) {
            this.$refs.rollingLoad.stop();
          }
        });
      },
      trySearch() {
        this.delay.trigger();
      },
      /**
       * 搜索
       */
      search() {
        this.store.search({
          keyword: this.keyword
        }).then(data => {
          convert(data);
        });
        this.$refs.rollingLoad.start();
      },

    },
    destroyed() {
      this.delay.destroy()
    }
  }
</script>
Last Updated: 1/14/2020, 12:00:52 PM