源文：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. 类的起源与metaclass

    一.概述 我们知道类可以实例化出对象,那么类本身又是怎么产生的呢?我们就来追溯一下类的起源. 二.类的起源 2.1 创建一个类 class Foo(object): def __init__(self ...

  2. 基于javaWeb阶段下的Servlet总结

    1. Servlet概述   Servlet是用Java语言编写的服务端的程序,采用request--response模式提供Web服务,并且支持标准ServletAPI,Servlet就一个运行在w ...

  3. 【Android】完善Android学习（七：API 4.0.3）

    备注:之前Android入门学习的书籍使用的是杨丰盛的<Android应用开发揭秘>,这本书是基于Android 2.2API的,目前Android已经到4.4了,更新了很多的API,也增 ...

  4. 在asp.net 中生成PDF的方法

    近期要用asp.net 2.0生成PDF,看了下书,查了下资料,发现可以有组件帮得上忙,可以下载itextsharp(https://sourceforge.net/projects/itextsha ...

  5. c++树，知道前序和中序求后序遍历

    经常有面试题就是知道一棵树的前序遍历和中序遍历让你写出后序遍历,这个慢慢画是能画出来的,但是要很快的弄出来还是要懂原理. 首先说一下三种遍历:所谓的前序后序和中序都是遍历时遍历根节点的顺序.子树的话依 ...

  6. 【leetcode 简单】第四十题 求众数

    给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在众数. 示例 1: 输入: [3,2,3] 输出: 3 ...

  7. 2017ACM暑期多校联合训练 - Team 2 1009 HDU 60563 TrickGCD （容斥公式）

    题目链接 Problem Description You are given an array A , and Zhu wants to know there are how many differe ...

  8. Class类和ClassLoader类的简单介绍

    反射机制中的Class Class内部到底有什么呢?看下图! 代码: Class cls=Person.class; 1.Class类: 1. 对象照镜子后可以得到的信息:某个类的数据成员名,方法和构 ...

  9. Linux下libevent安装与示例

    http://www.cnblogs.com/kunhu/p/3632225.html

  10. 夜神安卓模拟器adb命令详解

    https://www.yeshen.com/faqs/H15tDZ6YW 一.如何找到adb? 安装夜神安卓模拟器后,电脑桌面会有"夜神模拟器"的启动图标,鼠标右键--打开文件所 ...