前天在修改公司测试提出来的bug时候，用到了防抖函数，导师帮我完成的功能，用到了lodash里面的防抖函数，导师帮我写完之后，感觉防抖函数还是挺懵的，记得当初面试的时候，手写节流防抖，手写promise,手写代码是我最不愿意面对的，昨天弄了一点毕设之后，就在B站上面看up主晓舟报告讲解的节流防抖函数，目前这个是我认为讲的比较不错的，通俗易懂的，今天在公司自己手写了一遍，轻松写出来了，完全没有之前的写js代码逻辑的恐惧了，我想这也是我在实习期间的一个成长吧。包括我每天都会按照老大的建议，把自己的收获和在项目中遇到的难点，问题都会记录下来，只要有时间都会写，避免以后再在项目中遇到之前踩过的坑。看一遍，敲一遍，再写一遍，记录的效果会更好。废话不多说了，现在看下我自己写的代码，已经我对自己写的代码的疑惑。
<body>
<input type="text" />
<script>
const ipt = document.querySelector("input");
let t = null;
ipt.oninput = debounce(function() {
console.log(this.value);
},500)
function debounce(fn,delay) {
return function () {
if (t !== null) {
clearTimeout(t);
}
t = setTimeout(() => {
fn.call(this)
}, delay);
};
};
</script>
</body>平时我们在使用百度搜索的时候，在搜索的时候，每次输入会向后台发送ajax请求，这个案例就是模拟在输入框中输入，就会打印输入的内容，如果没有防抖函数，我们看到的效果是这样的，
每输入一次，就会打印一次，这样不就很浪费性能嘛？所以加个防抖函数，通过定时器，间隔一段时间再打印，说明此时，用户已经输入完成了，可以发送请求了。
但是我第一次的代码是这样写的，
const ipt = document.querySelector("input");
let t = null;
ipt.oninput = debounce(() => {
console.log(this);
console.log(this.value);
},500)
function debounce(fn,delay) {
return function () {
if (t !== null) {
clearTimeout(t);
}
t = setTimeout(() => {
fn()
}, delay);
};
};因为考虑到箭头函数，不会有this指向的问题，所以一开始就把防抖函数里面的第一个回调函数，换成了箭头函数，但是打印的时候发现是undefined，后来同通过打印得知setTimeout里面的this指向是input输入框，我就想到用call来改变this指向，于是代码又变成这样了，
const ipt = document.querySelector("input");
let t = null;
ipt.oninput = debounce(() => {
console.log(this);
console.log(this.value);
},500)
function debounce(fn,delay) {
return function () {
if (t !== null) {
clearTimeout(t);
}
t = setTimeout(() => {
fn.call(this)
}, delay);
};
};发现打印的结果还是undefined，为什么呢？于是，我就上网搜索了一下，javascript中回调函数中箭头函数的this指向，发现了这篇文章：JS回调函数中的 this 指向(详细)
里面这两句话，让我意识到回调函数中的this默认指向的是window，而箭头函数中的this，在一开始就确定下来指向哪里了，所以再用call改变this，最终箭头函数中的this还是指向window,于是我就想到把箭头函数改成普通函数，因为普通函数和箭头函数虽然一开始this指向的都是window，但是经过call的改变，普通函数的this最终指向的是input,至此让我认为好像用call和apply和bind改变this指向只是针对普通函数的，箭头函数不太管用。
6118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
