源文：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. 在Android 下写一个检测软件版本号 以自动升级APP 的插件

    直接上图上代码: 1.插件类的编写 工程目录结构图: 代码如下: package org.apache.cordova.versionupdate; import org.apache.cordova ...

  2. C语言 ------ #undef 的使用

    #undef 是在后面取消以前定义的宏定义 该指令的形式为 #undef 标识符 其中,标识符是一个宏名称.如果标识符当前没有被定义成一个宏名称,那么就会忽略该指令. 一旦定义预处理器标识符,它将保持 ...

  3. java格式化字符串，在指定位置插入指定字符串，兼容中英文以及特殊字符，例如:换行,用于解决生成pdf换行问题等问题

    本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处.  http://www.cnblogs.com/king-xg/p/6370890.html 如果觉得对您有 ...

  4. zTree使用技巧与详解

    zTree--Jquery 树插件,是在后台管理页面中常使用到的插件. 使用效果图: 核心代码: zTree配置: var setting = { data:{simpleData:{enable:t ...

  5. 数学：FFT

    在信息学竞赛中FFT只有一个用处那就是加速多项式的乘法 多项式乘法原本的时间复杂度是O(n^2)的,然后经过FFT之后可以优化为O(nlogn) FFT就是将系数表示法转化成点值表示法相乘,再由点值表 ...

  6. Linux下常用命令汇总

    1.ls 1.1 统计文件夹下文件数量 ls -l | wc -l 1.2 将文件夹下文件名输出到文件 ls -l > list.txt -F | grep - v[/$] 2.find 2.1 ...

  7. mysql 修改密码的几种方式

    第一种方式: 最简单的方法就是借助第三方工具Navicat for MySQL来修改,方法如下: 1.登录mysql到指定库,如:登录到test库. 2.然后点击上方“用户”按钮. 3.选择要更改的用 ...

  8. Logitech K810 + Ubuntu

    The Logitech K810 is a nice keyboard, but it does not work with Ubuntu out of the box. Still contrar ...

  9. 【BZOJ2683】简单题 [分治][树状数组]

    简单题 Time Limit: 50 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 你有一个N*N的棋盘,每个格子内有一 ...

  10. 关于linux的一些基础知识

    一.基础 1.linux所有内容以文件形式保存,包括硬件. 2.linux 不区分扩展名,靠权限区分.   #但是,约定 .sh脚本文件  .conf配置文件. 3.-rw-r--r--        ...