前端性能优化之---防抖和节流_前端监听y轴的值时,需要用防抖还是节流-优快云博客

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

	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秒执行一次

   }