3.1.1.防抖优化搜索框
一、在angular项目优化搜索框
(1)通过方法形式触发搜索的,可以引入lodash的debounce优化
步骤一:在index.html页面引入插件
<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.js"></script>
步骤二:作用的页面
<input type="text" data-ng-keyup="queryMethod()">
步骤三:在作用页面的controller里面添加防抖函数即可,如下所示:
$scope.init = function () {
// 添加loadsh的防抖动函数
$scope.queryMethod = _.debounce($scope.queryMethod, 500);
};
$scope.queryMethod = function () {...}
(2)通过监听searchValue值搜索,可以直接使用ng-model-options="{debounce: 400}"进行优化
步骤一:作用的页面
<input type="text" data-ng-model="searchValue" ng-model-options="{debounce: 400}">
步骤二:作用页面的controller
$scope.$watch('searchValue', function(newVal, oldVal) {
$scope.searchMethod();
});
二、在vue项目优化搜索框
步骤一:安装lodash插件(npm install lodash)
步骤二:在作用的页面
<template>
<div>
<input v-model="inputValue" @keydown="clickMethod">
</div>
</template>
<script>
import { debounce } from 'lodash'
export default {
name: 'DebounceOrThrottle',
data () {
return {
inputValue: ''
}
},
methods: {
clickMethod () {
let that = this
that.handle()
},
handle () {
console.log( '这里可以写你需要请求后台的方法')
}
},
created () {
this.clickMethod = debounce(this.clickMethod, 500)
},
}
</script>