源文：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. Codeforces 894.B Ralph And His Magic Field

    B. Ralph And His Magic Field time limit per test 1 second memory limit per test 256 megabytes input ...

  2. java 注解详解

    先引用一下百度百科的名词解析: 定义:注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它可以声明在包.类.字段. ...

  3. windows中apache+tomcat整合，使php和java项目能够独立运行

    一.下载和安装 1.安装php  网上有安装教程,不再赘述 2.安装apache 比如安装目录为e:\apache;  项目根目录为e:\www;   网上有安装教程,不再赘述 3.安装jdk  不再 ...

  4. 持久化的基于L2正则化和平均滑动模型的MNIST手写数字识别模型

    持久化的基于L2正则化和平均滑动模型的MNIST手写数字识别模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献Tensorflow实战Google深度学习框架 实验平台: Tens ...

  5. HDU 3977 斐波那契循环节

    这类型的题目其实没什么意思..知道怎么做后,就有固定套路了..而且感觉这东西要出的很难的话,有这种方法解常数会比较大吧..所以一般最多套一些比较简单的直接可以暴力求循环节的题目了.. /** @Dat ...

  6. Python学习笔记（五十）爬虫的自我修养（三）爬取漂亮妹纸图

    import random import urllib from urllib import request import os ################################### ...

  7. IO流-文件的写入和读取

    1.文件写入 类: FileWriter继承自Writer(字符流基类之一,另外一个为Reader) 方法: writer(参数); 根据参数可以写入字符.字符数组.字符数组中的一部分.整型.字符串. ...

  8. 【CodeForces】932 E. Team Work

    [题目]E. Team Work [题意]给定n和k,n个人中选择一个大小为x非空子集的代价是x^k,求所有非空子集的代价和%1e9+7.n<=10^9,k<=5000. [算法]斯特林反 ...

  9. Please move or remove them before you can merge

    在使用git pull时,经常会遇到报错: Please move or remove them before you can merge 这是因为本地有修改,与云端别人提交的修改冲突,又没有merg ...

  10. Calf Flac

    1.3.3 Calf Flac Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 223  Solved: 42[Submit][Status][Forum] ...