源文：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. vs2003一查找就卡死了

    Visual Studio 2003一查找就卡死了.解决办法如下: win7 32位下 解决方法:找到VS2003的安装目录,修改"...\Microsoft Visual Studio . ...

  2. 洛谷P3144 [USACO16OPEN]关闭农场Closing the Farm_Silver

    题目描述 Farmer John and his cows are planning to leave town for a long vacation, and so FJ wants to tem ...

  3. php 性能优化之opcache - 让你的php性能提升 50%

    性能提升原理:减少文件解析的时间. 我们都知道,程序要运行,得有一个编译或者解析的过程,编译或解析之后的代码才是机器可以运行的. 而 php 是一种解析性语言,在使用php来处理http请求的时候,每 ...

  4. 居中div，居中浮动的元素

    定位法:position:absolute 如果子级div有定义宽和高的话就可以用这个方法.注意:margin-top,和margin-left的值均为高和宽值的一半 margin:auto法 这个也 ...

  5. libuv移植到ios

    libuv官网只提供了os x的编译方法,没有IOS的.既然os x和ios的系统内核差不多,并且编译工具都是xcode,那我们只要重新指定cpu架构,就可以编译出ios版的了. 1.安装python ...

  6. LeetCode-Max Points on a Line[AC源码]

    package com.lw.leet3; import java.util.HashMap; import java.util.Iterator; import java.util.Map; imp ...

  7. php7.1安装

    找到对应的镜像,右键复制链接地址这里下载的镜像是PHP7http://cn2.php.net/get/php-7.1.0.tar.gz/from/this/mirror 最后通过wget下载这个地址里 ...

  8. 分享一个数据库sql_mode 引起的坑

    sql_mode坑 MySQL 5.7.x 默认值: ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR ...

  9. 你知道吗？Java开发的10位牛人

    James Gosling 1983年,Gosling获得了加州大学的计算机科学学士学位.1990年,他获得了卡内基梅隆大学的计算机科学博士学位,师从Bob Sproull.在攻读博士期间,他自己开发 ...

  10. a 标签传值

    转载:http://blog.csdn.net/muyeju/article/details/48594377 .<a>标签传值的形式--参数固定:<a href="地址? ...