JS学习函数节流(throttle)

最新推荐文章于 2025-06-05 11:46:42 发布

ou4582850

最新推荐文章于 2025-06-05 11:46:42 发布

阅读量401

点赞数

CC 4.0 BY-SA版权

文章标签： formdata axios $.ajax python 地图api获取经纬度

本文链接：https://blog.youkuaiyun.com/ou4582850/article/details/79478812

本文介绍了一种常用的前端优化技巧——函数节流（throttle）。通过限制函数调用频率，可以有效减少因频繁触发事件（如鼠标移动）而导致的资源浪费。文章提供了具体的JavaScript实现示例。

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

函数节流（throttle）:当我们遇到一些线性的事件某个处理，但是有不想在这个过程中无限制的执行，比如监听mousemove事件我想每隔2秒处理一下这个事件；这时就可以用throttle来帮忙处理。

function throttle(fn, time){
    var timer = null;
    return function(){
            if(!timer){ 
                timer = new Date();
            }
            else{
                var dateDiff = new Date() - timer;
                if(dateDiff < time){
                    return;
                }else{
                    timer = null;
                    setTimeout(fn);
                }
            }
    }
}

var test = throttle(function(){console.log('执行')}, 500)

var time = 1;
var interval = setInterval(function(){
    if(time == 1000) clearInterval(interval)
    console.log('触发')
    test();
    time++;
},10)