今天搞了一个简单的写法

话不多说，直接上代码

<!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 内核内存管理子系统源码解析系列,笔者还是会秉承之前系列文章的风格,采用一步一图的方式先是详细介绍相关原理,在保证大家清晰理解原理的基础 ...

  2. SpringBoot→Maven项目快速搭建

    使用软件 :SpringToolSuite4 打开软件后在Package Explorer 栏中点击右键 Spring starter project 等待反应 填写完毕之后点击next     fi ...

  3. beego学习———安装bee

    Bee安装 有各种坑,一会儿GOPATH的问题,一会儿局部的问题了 唉,搞了一个小时 很重要的问题!!!!!!!!!!!! beego的bee工具只能强制新建项目在GOPATH/src目录下 虽然在别 ...

  4. Python基础部分：8、for循环和range的使用

    目录 一.while循环补充说明 1.死循环 2.嵌套及全局标志位 二.for...循环 1.for...循环特点 2.for...循环语法结构 三.range方法 1.什么是range 2.不同版本 ...

  5. C#通过unsafe来操作指针

    这里不介绍unsafe的理论,这里单单介绍它的用法.如果要了解的更具体,可以看这篇大神的博文:C#通过指针操作图像 先从一个很简单的例子介绍: private void TestInptr() { u ...

  6. SpringBoot3正式版将于11月24日发布：都有哪些新特性？

    从 2018 年 2 月 28 号发布 Spring Boot 2.0 版本开始,整个 2.X 版本已经经过了 4 年多的时间,累计发布了 95 个不同的版本,而就在前不久,2.X 系列的也已经迎来了 ...

  7. 4.1：简单python爬虫

    简单python爬虫 在创建的python文件中输入下列代码: # coding:utf-8 import requests from bs4 import BeautifulSoup def spi ...

  8. 搭建漏洞环境及实战——搭建DVWA漏洞环境

    DVWA是一款开源的渗透测试漏洞练习平台,其中内涵XSS.SQL注入.文件上传.文件包含.CSRF和暴力破解等各个难度的测试环境. 1.在安装时需要在数据库里创建一个数据库名,进入MySQL管理中的p ...

  9. Redis的数据持久化

    介绍 Redis 的数据持久化方案 Redis 的数据持久化主要有两大机制,AOF 日志和 RDB 快照. AOF 持久化是通过保存 Redis 服务器所执行的写命令来记录数据库状态. RDB 持久化 ...

  10. MYSQL的回忆录（适合有基础的小伙伴看，没基础的看着估计够呛）

    SQL分类 MYSQL的数据类型 Text 类型 数据类型 描述 CHAR(size) 保存固定长度的字符串(可包含字母.数字以及特殊字符).在括号中指定字符串的长度.最多 255 个字符. VARC ...