节流,防抖,闭包
节流 throttle
节流点击按钮,设置三秒以后才可以点击下一次,在这三秒时间内无论点击多少次都不会触发函数,只有当到达三秒钟后才会继续触发函数
function fn(){
console.log(1)
}
function throttle(cd,wait){
//第一次执行的时间
let first = 0
//this指针改变,需要存this
let that = this return function(){
let now = new Date()
if(now - first > wait){ first = now cd.apply(that,argument)}
}
}
let btn = document.elementById('btn') btn.addEventListener("click",throttle(fn,3000),false)
防抖debounce
防抖:过滤掉输入过程中无意义的响应,只需要设置一个定时器,并在定时器启动后执行这个回调函数;若在定时器启动前又有相同回调到来,便取消之前的定时器(clearTimeout)——之前的回调便取消了;然后再创一个新的定时器回调,如此反复。
//防抖
点击按钮,在一定时间内继续执行按钮则不执行事件,最后一次点击执行事件
function debounce(fn, wait) {
let timeout;
let that = this;
return function() {
// 如果在2秒内点击按钮,则清除上次定时器,重新开始计时
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
fn.apply(that, arguments);
}, wait);
};
}
let btn = document.getElementById("btn"); function fn() {
console.log("1");
}
btn.addEventListener("click", debounce(fn, 2000), false);
闭包
能够访问另一个函数作用域的变量的函数
js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的
闭包特性:
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
闭包的好处:
①保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突
②在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)
③匿名自执行函数可以减少内存消耗
闭包的缺点:
① 被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;
②其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响
浙公网安备 33010602011771号