首先先了解概念:
防抖和节流:限制当前函数的执行次数
节流和防抖都是在降低频率
防抖: 通过setTimeout 的方式,在一定时间间隔内,将多次触发变成一次触发。
举个列子:
一个按钮,每点击一次会打印出1,用户不断地点击,就会不断的去发起请求,这会很浪费资源,可以防抖进行优化。
<body>
<button id="submit">提交</button>
<script>
var sub = document.getElementById('submit')
var timer=null
sub.onclick=function(){
clearTimeout(timer) //作用是在下一次点击开始前,把上一个定时器关闭,保证最后只保证一个
timer = setTimeout(()=>{
console.log("发送请求")
},1000)
}
</script>
</body>
上面的代码就是防抖的代码列子,防抖在规定时间内,只会执行一次操作,应用场景可以是搜索栏中的提示、滚动条的滚动等。
节流: 规定一个判断,改变这个判断即可,这个判断叫做节流阀,同时也是用setTimeout
<body>
<button id="submit">提交</button>
<script>
var sub = document.getElementById('submit')
var flage = true
sub.onclick = function() {
if (flage) {
flage = false
console.log(1);
setTimeout(() => {
flage = true
}, 1000)
}
}
</script>
</body>
这里的flage就是节流阀,用flage去判断
节流用的场景可以是商品预览图的放大镜效果时,不必每次鼠标移动都计算位置
防抖和节流的区别
防抖:不用在意过程,在一段时间内,只有最后一次产生效果
节流:一段时间内可以产生多个效果,只不过是降低了频率
扩展
防抖和节流不想写的时候可以引用 Lodash.js
防抖的用法
节流的用法
原型和原型链的简单了解
原型和原型链本来可以不做记录,但是怕我忘记,简单的记录一下
先从对应的名字开始。
原型:propotype
原型链:
_proto_
从属关系。
prototype 从属与函数,是函数的属性,每一个函数都有默认的prototype(原型属性) 普通对象 {}
proto 对象的一个属性 object: 也是一个对象{}
每一个对象的_proto_保存着该对象的构造函数prototype
?.constructor->实列化?对象的构造函数
继承方式可以用原型链继承