防抖和节流

最新推荐文章于 2024-09-07 14:37:16 发布

weixin_42416999

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量84

点赞数

分类专栏： js 文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42416999/article/details/129162543

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

防抖和节流是JavaScript性能优化的常用技巧，主要用于处理高频事件。防抖技术确保在事件停止触发n秒后执行回调，而节流则保证n秒内只执行一次。它们分别适用于页面滚动、搜索框输入、表单验证等场景。文中提供了防抖和节流的函数封装示例。

摘要由CSDN通过智能技术生成

定义

防抖：事件触发n秒后再执行回调，如果在n秒内再次触发的话，就要重新计算时间。就是说事件什么时候不触发了，就在那个点的n秒后执行回调。

节流：n秒内只运行一次，若在n秒内重复触发，只有一次生效。

应用场景

使用高频事件调用函数

防抖：

页面滚动

搜索框当停止输入调用搜索函数

表单验证

按钮提交事件

浏览器缩放事件

节流：

DOM元素拖拽

搜索联想(keyup)

计算鼠标移动的距离

canvas模拟画板功能

监听滚动事件判断是否页面滚到底部自动加载更多

封装方法

防抖

function debounce(func, wait){
    let timer = null;
    return function() {
        let _this = this;
        let args = arguments;
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(_this, args)
        }, wait)
    }
}

节流

function throttle(func, wait){
    let timer = null;
    return function() {
        let _this = this;
        let args = arguments;
        if(!timer){
            timer = setTimeout(() => {
                timer = null;
                func.apply(_this, args)
            }, wait)
        }

    }
}