js节流函数高级版
节流函数其主要作用就是防止用户在短时间内多次触发该事件。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body><script>
function throttle(fn, delay, duration) {
var timer = null,
begin = new Date();
return function() {
var context = this,
args = arguments,
current = new Date();
clearTimeout(timer);
if (current - begin >= duration) {
fn.apply(context, args);
begin = current;
} else {
timer = setTimeout(function() {
fn.apply(context, args);
}, delay)
}
}
}; function demo() {
console.log(1)
}
/*参数说明：第一个参数是要执行的函数，第二个参数是说在500毫秒内连续触发了该函数只执行一次，第三个参数是说每隔200毫秒自动执行一次该函数*/
window.onresize = throttle(demo, 500, 200)
</script>
</body> </html>
简单高效的方法：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<script>
function throttle(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function() {
method.call(context);
}, 300);
}; function demo() {
console.log(1)
}
window.onresize = function(){
throttle(demo, window)
}
</script>
</body> </html>
js节流函数高级版的更多相关文章
- js节流函数和js防止重复提交的N种方法
应用情景 经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复 ...
- 关于js节流函数throttle和防抖动debounce
废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...
- js 节流函数 throttle
/* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间, ...
- JS的函数节流（throttle）
什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
- JS奇淫巧技：防抖函数与节流函数
应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整 ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
- JS节流和防抖函数
一. 实现一个节流函数 // 思路:在规定时间内只触发一次function throttle (fn, delay) { // 利用闭包保存时间 let prev = Date.now() re ...
随机推荐
- jQuery（七）：节点操作
jQuery中节点操作主要分为以下几种: 查找节点. 创建节点. 插入节点. 替换节点. 复制节点. 删除节点. 一.查找节点 示例: <!DOCTYPE html> <html l ...
- SpringBoot的文件下载
SpringBoot的文件下载 2017年11月29日 10:32:20 阅读数:3907 SpringBoot的文件下载方法有很多,此处只记录使用Spring的Resource实现类FileSyst ...
- 图示 Smart-Art
在PPT中,图示有两个作用,一是将对象间的逻辑关系视觉化,使文字承载的信息一目了然; 二是打破呆板的页面版式,让枯燥的文本变得更有魅力. 比较聪明的办法是在Sma吨Art生成图形的基础上继续编辑,使其 ...
- jq 智能搜索
案例:http://www.runoob.com/jqueryui/example-autocomplete.html <input type="text" style=& ...
- JFinal的使用
JFinal 中的Controller Controller是JFinal核心类之一,该类作为MVC模式中的控制器.基于JFinal的Web应用的控制器需要继承该类.Controller是定义Acti ...
- 引用dataframe的值为什么会不同
在R语言中,通常有一些操作符可以来提取对象的子集,如以下三种: 1.“[” 单层方括号,返回的对象与原对象类型相同,它也可以返回一个对象中的多个元素: 2.“[[” 双层方括号,用来从列表(list) ...
- 关于qt QWebKit/QWebview 使用心得
当前项目为c/s客户端,采用qt4.8.7,需要使用仪表盘.折线图.柱状图等,曾经使用过qwt和自定义的图形控件,但是都不尽如人意.最近发现ECharts控件不错.为此就要在qt端使用web的技术.为 ...
- 关于Unity中的3D拾取
3D拾取 3D游戏实际上看到的是2D画面,我们在屏幕上点击,想要找到哪个3D物体,我们实际上是在一个2维平面内做3D拾取. 3D拾取实际上是,当玩家点击屏幕的时候,会从显示屏幕的摄像头发射一条射线,射 ...
- SAP SD 顾问面试问题 consultant interview questionnaire
以下是我个人目前面试团队 SD顾问问题的小结,希望对大家有所帮助, 也可能有回答错误的地方,希望同行不吝赐教. 也希望各位顾问们讲你们遇到的一些面试问题做个跟贴,方便大家共同进步,谢谢. 面试问题 ...
- python一天一题(1)
#有一个文件,文件名为output_1981.10.21.txt . # 下面使用Python: 读取文件名中的日期时间信息,并找出这一天是周几. # 将文件改名为output_YYYY-MM-DD- ...