debouce.js
这里需要用call、apply来改变fn的this指向,不然fn的this指向是不明确的。如果这里没有改变fn的指向,那么在vue实例中的函数内部,获取到的this就是undefined。
// 第一种:
export const debounce = function (fn, delay) {
let timer = null
return function (value) {
clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this, value)
}, delay)
}
}
// 第二种:
export function debounce (fn, delay) {
let timer = null
return function () {
clearTimeout(timer)
const args = arguments
const that = this
timer = setTimeout(function () {
fn.apply(that, args) // 这里的that是上一层函数的this
}, delay)
}
}
search.vue
watch: {
// searchText是输入框的值
searchText: {
handler: debounce(function (value) {
this.getSearchSuggesion(value) // 这个是请求后台数据的函数。
}, 500),
immediate: true
}
},