Open ntscshen opened 7 years ago
限制的方法有两种(两种差别不大)
第一个的应用场景:在 scroll
的时候,滚动到某个高度,显示某个模块。或者在滚动到底部的时候,触发加载"更多"数据
第二个的应用场景:
resize
的时候button
的 checked
来做。// 《高程三》給了最简洁经典的"防抖"代码
function debounce(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
}, 100);
}
function log(){
console.log('Hello debounce');
}
window.onscroll = function() {
debounce(log);
}
在窗口内滚动一次,停止,100ms后,打印Hello debounce
知道原理和概念了 - 那直接用 Lodash
中的 _.debounce
function log(){
console.log('Hello debounce');
}
window.onscroll = _.debounce(log, 100);
import { debounce } from 'lodash';
class autocomp extends React.Component {
constructor(props) {
super(props);
this.state = {
results: []
}
// 要把函数存储在一个不易变动的地方,否则debounce无法生效
this.handleInputThrottled = debounce(this.handleInput, 100);
}
handleInput = evt => {
const value = evt.target.value
const filteredRes = data.filter((item)=> {
// algorithm to search through the `data` array
})
this.setState({ results: filteredRes })
}
render() {
let { results } = this.state;
return (
<div className='autocomp_wrapper'>
<input placeholder="Enter your search.." onChange={this.handleInputThrottled} />
<div>
{results.map(result=>{result})}
</div>
</div>
);
}
}
// 用时间戳来判定是否已经到了回调该执行的时间,记录上次执行的时间戳,
// 每次触发 scroll 事件执行回调,在回调中判断当前时间戳距离上次执行
// 时间戳的间隔是否达到指定时间。如果是,则执行,并跟新上次执行的时间戳。
function log(){
console.log('Hello debounce');
}
var throttleV2 = function (fn, mustRunDelay) {
var timer = null;
var t_start;
return function () {
var _self = this;
var t_curr = +new Date();
if (!t_start) {
t_start = t_curr;
}
if (t_curr - t_start >= mustRunDelay) {
fn.apply(_self, arguments);
t_start = t_curr;
}
};
};
window.onscroll = throttleV2(log, 500);
// window.onscroll = _.throttle(log, 500);
知道原理和概念 - 那直接用 Lodash
中的 _.throttle
某个技术,一定是解决某些痛点的
一、应用场景
防抖debounce: 输入框搜索 节流throttle: 所有高频点击操作、onresize、window.onresize() 事件、mousemove 事件、上传进度等情况
二、区别
防抖(debounce): 一个函数在某个时间内,无论被触发多少次,都只执行最后一次。假设某个时间是3s,在3s内这个函数无论被触发多少次,3s都会被重新计时,直到3s内当前函数没有任何执行请求。 节流(throttle): 一个函数在某个时间内,只执行一次,无视后来产生的函数调用请求。
10s内触发100次
三、代码实现
四、对比lodash源码解析
_.debounce
防抖:在规定的时间内再次触发当前函数,则从0开始计算 使用场景:搜索联想展示下拉框,用户极高频率操作后( input输入 ),触发函数场景_.throttle
节流:在规定时间内触发内触发一次当前函数 使用场景:滚动,在N秒内必须触发一次函数的场景性能优化