源文：https://blog.csdn.net/crystal6918/article/details/62236730#reply

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="container" style="height: 300px;background: red;overflow: auto">

        <div style="height: 3000px;background: yellow;"></div>

    </div>

</body>

<script>

    //初级防抖

    /* // 将会包装事件的 debounce 函数

    function debounce(fn, delay) {

        // 维护一个 timer

        let timer = null;

        return function () {

            // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量

            let context = this;

            let args = arguments;

            clearTimeout(timer);

            timer = setTimeout(function () {

                fn.apply(context, args);

            }, delay);

        }

    }

    // 当用户滚动时被调用的函数

    function foo() {

        console.log('You are scrolling!');

    }

    // 在 debounce 中包装我们的函数，过 2 秒触发一次

    let elem = document.getElementById('container');

    elem.addEventListener('scroll', debounce(foo, 500)); */

    //更高级防抖

   /*  function debounce(func, delay, immediate) {

        var timer = null;

        return function () {

            var context = this;

            var args = arguments;

            if (timer) clearTimeout(timer);

            if (immediate) {

                //根据距离上次触发操作的时间是否到达delay来决定是否要现在执行函数

                var doNow = !timer;

                //每一次都重新设置timer，就是要保证每一次执行的至少delay秒后才可以执行

                timer = setTimeout(function () {

                    timer = null;

                }, delay);

                //立即执行

                if (doNow) {

                    func.apply(context, args);

                }

            } else {

                timer = setTimeout(function () {

                    func.apply(context, args);

                }, delay);

            }

        }

    }

    function foo() {

        console.log('You are scrolling!');

    }

    let elem = document.getElementById('container');

    elem.addEventListener('scroll', debounce(foo, 500, true)); */

</script>

<script>

    //节流1.时间戳版

    /*  var throttle = function(func,delay){

     var prev = Date.now();

     return function(){

         var context = this;

         var args = arguments;

         var now = Date.now();

         if(now-prev>=delay){

             //func()

             func.apply(context,args);

             prev = Date.now();

         }

     }

 } */

    //节流2.定时器版

    /* var throttle = function (func, delay) {

        var timer = null;

        return function () {

            var context = this;

            var args = arguments;

            if (!timer) {

                timer = setTimeout(function () {

                    func.apply(context, args);

                    timer = null;

                }, delay);

            }

        }

    } */

    //节流3.综合使用时间戳与定时器

    var throttle = function (func, delay) {

        var timer = null;

        var startTime = Date.now();

        return function () {

            var curTime = Date.now();

            var remaining = delay - (curTime - startTime);

            var context = this;

            var args = arguments;

            clearTimeout(timer);

            if (remaining <= 0) {

                func.apply(context, args);

                startTime = Date.now();

            } else {

                timer = setTimeout(func, remaining);

            }

        }

    }

    function foo() {

        console.log('arguments');

    }

    let elem = document.getElementById('container');

    elem.addEventListener('scroll', throttle(foo, 500, true));

</script>

</html>

　　

js:防抖动与节流【转载】的更多相关文章

  1. js:防抖动与节流

    http://blog.csdn.net/crystal6918/article/details/62236730

  2. js函数的节流和防抖

    js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repai ...

  3. 因为它，我差点删库跑路：js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

  4. JS日期格式化(网上转载)

    JS日期格式化(网上转载) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  5. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  6. underscore.js中的节流函数debounce及trottle

    函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

  7. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

  8. 面试必问题：JS防抖与节流

    摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...

  9. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

随机推荐

  1. poj2115 C Looooops

    C Looooops Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 29262   Accepted: 8441 Descr ...

  2. [linux]linuxI/O测试的方法之dd

    参考http://www.thomas-krenn.com/en/wiki/Linux_I/O_Performance_Tests_using_dd Measuring Write Performan ...

  3. [DeeplearningAI笔记]卷积神经网络1.2-1.3边缘检测

    4.1卷积神经网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.2边缘检测示例 边缘检测可以视为横向边缘检测和纵向边缘检测如下图所示: 边缘检测的原理是通过一个特定构造的卷积核对原始图 ...

  4. LeetCode-Reverse Words in a String[AC源码]

    package com.lw.leet1; import java.util.Stack; /** * @ClassName:Solution * @Description: * Reverse Wo ...

  5. Ajax笔记-加强版

    AJAX :   Asynchronous JavaScript and XML 异步JavaScript和XML   用javascript异步形式去操作xml 进行数据交互   节省用户操作,时间 ...

  6. VS Code 配置 C/C++ 环境

    写作原因 微软的 VSCode 一直以来为人诟病的一个问题就是对于 C/C++ 工程的编译以及调试支持度有限,配置起来比较复杂,但是 vscode-cpptools 团队经过一段时间的 bug 修复之 ...

  7. excel表格添加固定宽高的图片

    import xlsxwriter,xlrd import glob #打开excel文件 data=xlrd.open_workbook('优秀创意库-20180725.xlsx') #获取第一张工 ...

  8. 重构改善既有代码设计--重构手法04：Replace Temp with Query （以查询取代临时变量）

    所谓的以查询取代临时变量:就是当你的程序以一个临时变量保存某一个表达式的运算效果.将这个表达式提炼到一个独立函数中.将这个临时变量的所有引用点替换为对新函数的调用.此后,新函数就可以被其他函数调用. ...

  9. .NET面试题系列（一）基本概念

    什么是CLR CLR常用简写词语,CLR是公共语言运行库(Common Language Runtime)和Java虚拟机一样也是一个运行时环境,它负责资源管理(内存分配和垃圾收集等),并保证应用和底 ...

  10. ASP.NET Session详解笔记

    (一) 描述 当用户在 Web 应用程序中导航 ASP.NET 页时,ASP.NET 会话状态使您能够存储和检索用户的值.HTTP 是一种无状态协议.这意味着 Web 服务器会将针对页面的每个 HTT ...