input 输入事件防抖

最新推荐文章于 2024-07-05 01:00:35 发布

idomyway

最新推荐文章于 2024-07-05 01:00:35 发布

阅读量3.9k

点赞数 1

分类专栏： JavaScript 文章标签： input 防抖节流 settimeout 输入事件

本文链接：https://blog.csdn.net/idomyway/article/details/108229597

版权

JavaScript 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

前言

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;
	    }
	}
}