input 输入事件防抖

前言

    input输入进行查询，不想输入一个拼音就触发事件，这样会频繁的触发，需要通过输入中文完成后再进行搜索

解决方法 — jquery

var cpLock = true;
$('#search-input').on('compositionstart', function () {
     
    cpLock = false;
  });
  $('#search-input').on('compositionend', function () {
     
    cpLock = true;
  });
  $("#search-input").on("input", function (e) {
     
    e.preventDefault();
    var _this = this;
    setTimeout(function () {
     
      if (cpLock) {
     
        //开始写逻辑
        searchValue = $("#search-input").val().trim('');
        if (searchValue === '') {
     
          $(".search-result").html('')
        } else {
     
          search(searchValue)
        }
      }
    }, 0)
  })

解决方法 — vue

<div class="input-warp">
  <input type="text" v-model="searchValue" />
  <div @click="search"></div>
</div>
export default {
     
	data () {
     
		return {
     
			searchValue: '',
			searchArr: []
		}
	}
  	watch: {
     
		searchValue: {
     
	      	handler() {
     
		        if (this.timer) {
     
		          clearTimeout(this.timer)
		        }
		        this.timer = setTimeout(() => {
     
		          this.search();
		        }, 200)
		      },
		    deep: true
	    }
	}
  	methods: {
     
		search () {
     
	      this.isSearch = true;
	      this.searchValue = this.searchValue.trim('');
	      if (this.searchValue !== '') {
     
	        this.searchList();
	      } else {
     
	        this.searchArr = [];
	      }
	    },
	    searchList () {
     
	      axios({
     
	        url: ``
	      }).then(({
      data }) => {
     
	        this.searchArr = [];
	        if (this.searchValue === '' || !data.content || !data.content.features.features) {
     
	          this.searchArr = [];
	          return
	        }
	        // 查询结果
	        this.searchArr = data.content.features.features;
	    }
	}
}