函数节流、函数防抖的原理以及lodash的节流(throttle) 和 防抖(debounce)在vue+ts中的使用

区别:

1. 函数节流在特定时间内触发一次任务,并且是规律的
2. 函数防抖只有最后一次延时时间到达之后执行一次

应用场景:

• throttle

1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
2. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

• debounce

1. 百度搜索，用户在不断输入值时，用防抖来节约请求资源。
2. window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

// 函数节流原理
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

// 结果：在滚动状态，每隔0.3秒输出一次函数节流

// 函数防抖原理
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
}; 

// 结果：在停止滚动后的0.3秒输出函数防抖

lodash 的 节流(throttle) 和 防抖(debounce)
例：每隔一秒钟执行一次 getRemote函数，打印一次 小伦叽

<el-input
	placeholder="请输入..."
	@input="search()">
	<i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
import _ from "lodash";
search = _.throttle(this.getRemote, 1000);
getRemote() {
	console.log("小伦叽")
}

例：在停止输入1秒钟后，打印一次 小伦叽

<el-input
	placeholder="请输入..."
	@input="search()">
	<i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
import _ from "lodash";
search = _.debounce(this.getRemote, 1000);
getRemote() {
	console.log("小伦叽")
}