今天搞了一个简单的写法

话不多说，直接上代码

<!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. 一篇文章带你了解服务器操作系统——Linux简单入门

    一篇文章带你了解服务器操作系统--Linux简单入门 Linux作为服务器的常用操作系统,身为工作人员自然是要有所了解的 在本篇中我们会简单介绍Linux的特点,安装,相关指令使用以及内部程序的安装等 ...

  2. 从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag

    今天看到一篇文章中提到了一个好用的工具release-it.刚好可以用在我正在开发的vue3组件库.纸上得来终觉浅,绝知此事要躬行,说干就干,下面就介绍如何将release-it应用到实际项目中,让组 ...

  3. jquery根据自定义属性选择标签

    <div myattr="test"></div> 使用$("div[myattr='test']")进行选择 <a href=& ...

  4. JS逆向实战5--JWT TOKEN x_sign参数

    什么是JWT JWT(JSON WEB TOKEN):JSON网络令牌,JWT是一个轻便的安全跨平台传输格式,定义了一个紧凑的自包含的方式在不同实体之间安全传输信息(JSON格式).它是在Web环境下 ...

  5. 【JVM】关于JVM，你需要掌握这些 | 一文彻底吃透JVM系列

    写在前面 最近,一直有小伙伴让我整理下关于JVM的知识,经过十几天的收集与整理,初版算是整理出来了.希望对大家有所帮助. JDK 是什么? JDK 是用于支持 Java 程序开发的最小环境. Java ...

  6. Sql Server性能排查和优化懒人攻略

    转载自作者zhang502219048的微信公众号[SQL数据库编程]:Sql Server性能排查和优化懒人攻略 很多年前,笔者那时刚从广东技术师范学院(现为广东技术师范大学,以前为广东民族学院)的 ...

  7. python 总是忘函数

    sorted sorted()函数对所有可迭代对象进行操作,返回的是一个新列表:列表的list方法只对列表有效,且不生成新的列表. # 对成绩升序排列,名字降序排列 d1 = [{'name':'al ...

  8. requests模块/openpyxl模块/简单爬虫实战

    内容概要 第三方模块的下载及使用 网络爬虫及requests模块 网络爬虫实战爬取二手房信息 自动化办公领域模块openpyxl 练习题及答案 第三方模块的下载 第三方模块就类似与别人写好的模块,我们 ...

  9. 重学c#系列——委托和匿名函数[二十五]

    前言 简单介绍一下什么是委托. 正文 以前也写过委托,这次算是重新归档,和新的补充吧. https://www.cnblogs.com/aoximin/p/13940125.html 有些人说委托是函 ...

  10. VsCode搭建一个React项目

    安装Node.js 使用 npm -v检查安装成功 目前的 node 中都会自带 npm 所以不需要重新下载 直接切换至淘宝镜像即可 1.临时使用 :npm --registry https://re ...