小编给大家分享一下javascript函数节流和防抖的应用场景有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
throttle 节流
事件触发到结束后只执行一次。
应用场景
触发mousemove事件的时候， 如鼠标移动。
触发keyup事件的情况， 如搜索。
触发scroll事件的时候， 譬如鼠标向下滚动停止时触发加载数据。
coding
方法1 防抖
计算
安全
数据库
网络和加速
企业服务
// function resizehandler(fn, delay){
// clearTimeout(fn.timer);
// fn.timer = setTimeout(() => {
// fn();
// }, delay);
// }
// window.onresize = () => resizehandler(fn, 1000);方法2 闭包 防抖
function resizehandler(fn, delay){
let timer = null;
return function() {
const context = this;
const args=arguments;
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context,args);
}, delay);
}
}
window.onresize = resizehandler(fn, 1000);debounce 防抖
事件出发后一定的事件内执行一次。
应用场景
window 变化触发resize事件是， 只执行一次。
电话号码输入的验证， 只需停止输入后进行一次。
coding
function resizehandler(fn, delay, duration) {
let timer = null;
let beginTime = +new Date();
return function() {
const context = this;
const args = arguments;
const currentTime = +new Date();
timer && clearTimeout(timer);
if ((currentTime - beginTime) >= duration) {
fn.call(context, args);
beginTime = currentTime;
} else {
timer = setTimeout(() => {
fn.call(context, args)
}, delay);
}
}
}
window.onresize = resizehandler(fn, 1000, 1000);看完了这篇文章，相信你对“javascript函数节流和防抖的应用场景有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
