超级容易理解的函数节流(throttle)
今天搞了一个简单的写法
话不多说，直接上代码
<!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)的更多相关文章
- js 高程 函数节流 throttle() 分析与优化
在 js 高程 22.3.3章节 里看到了 函数节流 的概念,觉得给出的代码可以优化,并且概念理解可以清晰些,所以总结如下: 先看 函数节流 的定义,书上原话(斜体表示): 产生原因/适用场景: 浏览 ...
- [JavaScript] 函数节流(throttle)和函数防抖(debounce)
js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- 函数节流throttle和防抖debounce
throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...
- 深入理解JS函数节流和去抖动
一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...
- javascript 函数节流 throttle 解决函数被频繁调用、浏览器卡顿的问题
* 使用setTimeout index.html <html> <head> <meta charset="UTF-8"> <title ...
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- 详解防抖函数（debounce）和节流函数（throttle）
本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...
- JS的函数节流（throttle）
什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...
随机推荐
- 4.Git分支查看&创建&切换&合并
查看分支 git branch -v # 查看分支,*代表当前所在的分支 创建分支 git branch hot-fix # 创建一个hot-fix分支,然后使用-v查看 # 可以看到除了ma ...
- 12.-ORM-条件查询&查询谓词
一.条件查询 filter(条件) 语法:MyModel.objects.filter(属性1=值1,属性2=值2) 作用:返回包含次条件的全部数据集 返回值:QuerySet容器对象,内部存放MyM ...
- 【神经网络】丢弃法（dropout）
丢弃法是一种降低过拟合的方法,具体过程是在神经网络传播的过程中,随机"沉默"一些节点.这个行为让模型过度贴合训练集的难度更高. 添加丢弃层后,训练速度明显上升,在同样的轮数下测试集 ...
- 1分钟完成在线测试部署便捷收集班级同学文件的web管理系统
最近CSDN推出了一个新功能[云IDE],个人对这个新功能(比赛奖金 )挺感兴趣的,于是瞬速地拿之前自己搞的一个便捷收集班级同学文件的web管理系统(下面简称该项目为cfile)体验了一下,发现功能还 ...
- cookie中 防止重复存值 （可用于历史记录等）
function makeCookie($key,$val){ // 查看cookie中是否已经存过键为history_ids if(Cookie::has($key)){ // 已经存过了 $jso ...
- java中的自动拆装箱
一:是什么 java的自动拆装箱,是从jdk1.5之后被引入的,java中的类型分为基本类型和引用类型,而自动拆装箱,可以让基本类型和对应的包装类,无缝转换.先拿最基本的来看. public clas ...
- HCIE Routing&Switching之MPLS LDP理论
前文我们了解了MPLS的静态LSP配置相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16937104.html:今天我们来聊一聊标签分发协议LDP相关 ...
- 关于 risrqnis
这道题里最有用的( Range Insert Subset Range Query [n?] In Set 破案了 我那五个点是因为维护不知道有什么用的东西炸了 删了就过了 题面 [JRKSJ R4] ...
- python读入中文文本编码错误
python读入中文文本编码错误 python读入中文txt文本: #coding:utf-8 def readFile(): fp = open('emotion_dict//neg//neg_al ...
- JavaScript Promises, async/await
new Promise() 的时候,传一个 executor 给 Promise. let promise = new Promise(function(resolve, reject) { // t ...