1、函数节流throttle

通俗解释：

假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯； 但是，你是个没耐心的人，你最多只会等待电梯停留一分钟； 在这一分钟内，你会开门让别人进来，但是过了一分钟之后，你就会关门，让电梯上楼。

所以throttle的作用是，预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期。

应用：在指定时间，事件最多触发一次，如监听滚动事件。

上述例子改为 地铁 更合适。

2、函数去抖debounce

假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯； 如果在电梯门关闭之前，又有人来了，你会继续开门； 这样一直进行下去，你可能需要等待几分钟，最终没人进电梯了，才会关闭电梯门，然后上楼。

所以debounce的作用是，当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔。

应用：百度首页的搜索按钮。

3、函数节流与函数去抖实现

<!DOCTYPE html>

<html lang="zh">

    <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>函数节流与函数去抖</title>

    </head>

    <body>

        <button type='button' id="btn">函数节流</button>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            const btn = document.getElementById('btn');

            //函数去抖

            function debounce(fn, delay) {

                var timer = null;

                return function(...args) {

                    clearTimeout(timer);

                    timer = setTimeout(() => fn.apply(this, args), delay);

                }

            }

            //函数节流

            function throttle(fn, wait) {

                var timer;

                return function(...args) {

                    if(!timer) {

                        timer = setTimeout(() => timer = null, wait);

                        return fn.apply(this, args);

                    }

                }

            }

            btn.onclick = debounce(function() {

                console.log("clicked");

            }, 300);

            //按钮每500ms一次点击有效

            btn.onclick = throttle(function() {

                console.log("button clicked");

            }, 500);

        </script>

    </body>

</html>

一个具体例子（lodash+vue）：

<template>

    <div class="about">

        <Button type="primary">Primary</Button>

        <Upload

            action="http://39.106.100.155:3001/file-upload/multiple-uploadll/"

            :data="imgData"

            multiple

            :headers="headers"

        >

            <Button icon="ios-cloud-upload-outline">Upload files</Button>

        </Upload>

    </div>

</template>

<script>

import _ from "lodash";

export default {

    data() {

        return {

            imgData: {

                userName: "test"

            },

            headers: {

                token: "123"

            }

        };

    },

    methods: {

        test() {

            console.log("click");

            this.debounce();

            this.throttle();

        }

    },

    created() {

        let i = 0;

        // 在 0.5s 秒内最多执行 func 一次的函数。

        this.debounce = _.debounce(() => {

            console.log("debounce");

        }, 500);

        // 在 0.5s 秒内最多执行 func 一次的函数。

        this.throttle = _.throttle(() => {

            console.log("throttle");

        }, 500);

        let time = setInterval(() => {

            // this.test();

            if (i > 9) {

                clearInterval(time);

            }

            this.test();

            i++;

        }, 100);

    }

};

</script>

控制台输出：

throttle 每0.5s就执行一次了。
而debounce 只执行了一次。

js 函数节流throttle 函数去抖debounce的更多相关文章

  1. [JavaScript] 函数节流(throttle)和函数防抖(debounce)

    js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...

  2. JavaScript 函数节流和函数去抖应用场景辨析

    概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...

  3. javascript中的函数节流和函数去抖

    带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...

  4. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

  5. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

  6. 函数节流throttle和防抖debounce

    throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...

  7. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  8. JS函数节流和函数防抖问题分析

    问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是 ...

  9. 如何使用 js 实现一个 throttle 函数

    如何使用 js 实现一个 throttle 函数 原理 实现方式 "use strict"; /** * * @author xgqfrms * @license MIT * @c ...

随机推荐

  1. 【费用流】BZOJ1927-[Sdoi2010]星际竞速

    [题目大意] 有一些点,它们之间存在一些有向边(由编号小的到编号大的),从一点到另一点消耗时间为边长.也可以消耗Ti时间直接抵达任意一个点.问所有点都走一遍最少需要多少时间? [思路] ①将每个点i拆 ...

  2. [CodeForces-332E]Binary Key

    题目大意: 给你两个字符串p和s,让你求出一个字典序尽量小的长度为k的01串密钥,能将p转化为s. 密钥的工作方式如下: 第i位是0,表示这一位无用: 第i位是1,表示这一位有用. 若密钥的长度比s短 ...

  3. 11.m进制转十进制

    Strlen是字符串有多长就是多长,包括所有的元素和\0这个结束符 题目描述 Description 将m进制数n转化成一个十进制数 m<=16 题目保证转换后的十进制数<=100 输入描 ...

  4. Educational Codeforces Round 12 E. Beautiful Subarrays 字典树

    E. Beautiful Subarrays 题目连接: http://www.codeforces.com/contest/665/problem/E Description One day, ZS ...

  5. HDU 5296 Annoying problem dfs序 lca

    Annoying problem 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5296 Description Coco has a tree, w ...

  6. [原]Redis详细配置介绍

    Redis详细配置介绍 # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 ...

  7. 典型案例收集-使用OpenVPN连通多个机房内网（iptables+静态路由）

    说明: 1.这个方案是我最初实现的方案,目的在于OpenVPN连通后使其能访问各自的子网,实现互通. 2.主要以iptables为主,这个是关键点,并且这种方式配置iptables十分复杂,最后加入了 ...

  8. combotree的总结(这个好)

    1:最近有这个需求,就是ext下的combo下拉是树,网上的例子很多,封装的也很好,基本都可以满足下拉框下出现想要的树,但是我的使用情况是比如在用户编辑的时候,要把用户已经选择过的数值自动再赋值到下拉 ...

  9. mac os颜色拾取工具/软件/器推荐

    软件名:ColorSnappe 目前我用的时1.1.0版本 该工具可以利用alt+command+c快捷键拾取颜色,拾取后可以自动把颜色代码放入剪切板 .我最喜欢它可以生成ios开发的代码,比如选择了 ...

  10. ELM322 - OBD (VPW) to RS232 Interpreter (v2.0)

    http://elmelectronics.com/DSheets/ELM322DS.pdf