防抖是:用户多次点击后,在一定的时间内.点击的事件只执行一次.剩余的时间按照,最新的一次点击重新计算
下面是一步一步按照思路写的
function debounce(fu, time = 5000) {
let timeout = null
clearTimeout(timeout)
timeout = setTimeout(() => {
fu()
}, time)
}
function sayHai() {
console.log('hi')
}
debounce(sayHai)
debounce(sayHai)
debounce(sayHai)
问题1: 怎么计算剩余多少时间
不用计算
问题2: 如果用上边写的这种方式 ? 能达到效果吗 ?
达不到效果, 用上边的方式写的模拟三次点击的时候.是会执行三次的
function debounce(fu, time = 5000) {
let timeout = null
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
fu()
}, time)
}
}
function sayHai() {
console.log('hi')
}
debounce(sayHai)
debounce(sayHai)
debounce(sayHai)
问题3: 使用上边的这种方式, 也不能达到效果.输出的结果什么都没有
function debounce(fu, time = 500) {
let timeout = null
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
fu.apply(this, arguments); //解决this 和event的问题
}, time)
}
}
function sayHai() {
console.log('hi')
}
debounce(sayHai)
debounce(sayHai)
debounce(sayHai)
问题4: 使用这个貌似也不行可能当前的这个this, 指向就不对
用一个RN试试
下面是用RN写的例子.达到了想要的效果:
注意点: 1、怎么用最新的点击的开始计算时间 2、this指向(关键在第一个参数，为了确保上下文环境为当前的this，所以不能直接用fn。)
debounce=(fu, time = 500)=> {
let timeout = null
console.log(timeout)
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
fu.apply(this, arguments); //解决this 和event的问题
}, time)
}
}
sayHai() {
console.log('hi')
}
<TouchableOpacity onPress={this.debounce(this.sayHai)}>
<Text style={{ color: '#000' }}>测试防抖</Text>
</TouchableOpacity>
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率 ,他两的区别就是:一个是时间会按照新的点击重新计算.而节流是
某个固定的时间只执行一次. 实现方式差不多.多了一个以前是否点击过的标记位.直接贴代码
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在
开头被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
