今天搞了一个简单的写法

话不多说，直接上代码

<!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>簡易版函数节流(throttle)</title>

</head>

<body>

<button id="mybutton">點擊執行函數</button>

  <script>

  function throttle(myfun, interval = 3000) {

    let canRun = true;

    let i = 0;

    return function () {

        if (!canRun) return;

        canRun = false;

        setTimeout(() => {

          myfun.apply(this, arguments);

          i++;

            console.log('可以執行操作啦！'+ i);

            canRun = true;

        }, interval);

    };

}

var mybuttony = document.getElementById('mybutton');

mybuttony.addEventListener("click", throttle(function myfun(myarg){

     console.log(myarg);

    }))

  </script>

</body>

</html>

超级容易理解的函数节流(throttle)的更多相关文章

  1. js 高程 函数节流 throttle() 分析与优化

    在 js 高程 22.3.3章节 里看到了 函数节流 的概念,觉得给出的代码可以优化,并且概念理解可以清晰些,所以总结如下: 先看 函数节流 的定义,书上原话(斜体表示): 产生原因/适用场景: 浏览 ...

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

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

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

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

  4. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  5. 函数节流throttle和防抖debounce

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

  6. 深入理解JS函数节流和去抖动

    一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...

  7. javascript 函数节流 throttle 解决函数被频繁调用、浏览器卡顿的问题

    * 使用setTimeout index.html <html> <head> <meta charset="UTF-8"> <title ...

  8. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  9. 详解防抖函数（debounce）和节流函数（throttle）

    本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...

  10. JS的函数节流（throttle）

    什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...

随机推荐

  1. C#中的特性+反射

    反射 反射指程序可以访问.检测和修改它本身状态或行为的一种能力. 程序集包含模块,而模块包含类型,类型又包含成员.反射则提供了封装程序集.模块和类型的对象. 您可以使用反射动态地创建类型的实例,将类型 ...

  2. glusterfs安装配置

    目标: 原有的k8s的集群磁盘容量不够,数据迁移无法完成,数据迁移是物理机无法由于采购磁盘流程过程,申请虚拟机搭建glusterfs做分布式存储 磁盘规划: # 查看盘符 $ lsblk # 然后创建 ...

  3. Java计算文件或文件夹大小

    导入此类后,直接调用FilesUtil.returnSizi(String path),即可获取文件或者文件夹大小. 代码: 1 /** 2 * 路人甲操作文件的工具类 3 * returnSizi( ...

  4. Azure DevOps Server 设置项目管理用户，用户组

    一,引言 Azure DevOps Server 搭建完成后,关于如何进行项目管理,项目成员管理等,我们接着上一篇文章,继续讲解 Azure DevOps Server 的用户,用户组.首先,我们需要 ...

  5. 2022春每日一题：Day 11

    题目:高斯消元法 高斯消元法是一个模板,下面简单介绍其内容以及实现方法. 高斯消元是求一个求多元一次方程组的解的算法. 就是形式如下的关于x1,x2...xn的方程组的解. a11x1 + a12x2 ...

  6. 基于SpERT的中文关系抽取

    SpERT_chinese 基于论文SpERT: "Span-based Entity and Relation Transformer"的中文关系抽取,同时抽取实体.实体类别和关 ...

  7. 10 | Kubernetes一键部署利器：kubeadm

    你好,我是张磊.今天我和你分享的主题是:Kubernetes一键部署利器之kubeadm. 通过前面几篇文章的内容,我其实阐述了这样一个思想:要真正发挥容器技术的实力,你就不能仅仅局限于对Linux容 ...

  8. Seata 1.5.2 源码学习（Client端）

    在上一篇中通过阅读Seata服务端的代码,我们了解到TC是如何处理来自客户端的请求的,今天这一篇一起来了解一下客户端是如何处理TC发过来的请求的.要想搞清楚这一点,还得从GlobalTransacti ...

  9. 基于python的数学建模---Fuzzy C-Means（模糊C均值聚类）

    簇数的确定: 要用到k-means里面的轮廓系数 基于python的数学建模---轮廓系数的确定 - 坤丶 - 博客园 (cnblogs.com) 模糊c的代码 import copy import ...

  10. 第2-4-3章 规则引擎Drools基础语法-业务规则管理系统-组件化-中台

    目录 4. Drools基础语法 4.1 规则文件构成 4.2 规则体语法结构 4.3 注释 4.4 Pattern模式匹配 4.5 比较操作符 4.5.1 语法 4.5.2 操作步骤 4.6 执行指 ...