前端性能优化之---防抖和节流

最新推荐文章于 2024-09-14 00:25:28 发布

原创最新推荐文章于 2024-09-14 00:25:28 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JS 专栏收录该内容

63 篇文章

订阅专栏

本文深入探讨了前端开发中防抖与节流的技术原理，旨在优化用户体验，防止因频繁触发事件导致页面卡顿。通过具体代码实例，详细解析了如何实现防抖与节流，以确保页面响应速度和流畅度。

防抖：为了防止用户频繁发出请求或者频繁触发某个时间函数，造成页面卡顿影响体验。防抖就是把用户频繁触发的多次事件做成一次触发。
代码逻辑：
下面展示一些 内联代码片。

	let time = null;
    function debounce(){
        if(time){
            clearTimeout(time);   //设定时间内的下一次事件触发时清空定时器
        }

        time = setTimeout(function (){
            console.log(123);
            time = null;   //执行完清空定时器
        },1500)   //1500为设定事件触发后1.5秒内没有下一次的事件触发执行一次
    }

节流：也是为了防止用户频繁发出请求或者频繁触发某个时间函数，造成页面卡顿影响体验。节流就是把用户频繁触发的事件按一定的频率来触发。
代码逻辑：
下面展示一些 内联代码片。

    let timeThrotle = null;
   function throttle(){
       if(timeThrotle){
        return ;    //设定时间内的下一次事件触发时返回
       }

       timeThrotle = setTimeout(() => {
        console.log(111);
        timeThrotle = null;   //执行完清空定时器
       },1000);   //1000为设定每1秒执行一次

   }