js函数节流防抖

函数节流:一定时间内控制函数只能执行一次。
函数不可高频率执行
应用场景onscroll

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲,如果在执行中,则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

函数防抖:是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。
只要在连续触发就不执行
应用场景:用户输入时的校验onkeydown

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码,重置回初始化状态

    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
}; 

https://www.jianshu.com/p/3e8e31f99639

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执...
    yuanjiex阅读 644评论 0 1
  • 前言 最近和前端的小伙伴们,在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是,想深入研究一下两者...
    youthcity阅读 23,626评论 5 78
  • 一、概念 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。 旧款电视机的工作原理,就是一行行得扫描出...
    木子川页心阅读 535评论 1 1
  • 在日常开发中,我们经常能够碰到以下工作场景: 对提交按钮进行变态的点击压力测试输入框内容的实时校验(譬如验证用户名...
    叫我小徐阅读 1,028评论 0 5
  • 静静的躺着 思绪和着时间 也静静的淌着 微风轻拂着窗帘 窸窸窣窣 窗外飘进阵阵歌声 也将大妈们舞动的画面 带入了脑...
    枫之然阅读 198评论 6 13