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 ...
随机推荐
- nginx 4层tcp代理获取真实ip
举个例子,Nginx 中的代理配置假如是这样配置的: location / { proxy_http_version 1.1; proxy_set_header X-Real-IP $remote_a ...
- python获取上一个月第一天0点的unix时间戳
这两天做统计,需要用到当月第一天0点0分0秒的unix timestamp,上个月第一天0点的unix时间戳,三个月前月第一天的0点的Unix时间戳,六个月前当月第一天的0点的Unix时间戳,现在整理 ...
- PHP开发安全问题总结
php给了开发者极大的灵活性,但是这也为安全问题带来了潜在的隐患,近期需要总结一下以往的问题,在这里借翻译一篇文章同时加上自己开发的一些感触总结一下. 简介 当开发一个互联网服务的时候,必须时刻牢记安 ...
- APICloud 实践 —— 手机端预览项目
上一次讲到如何创建一个应用,今天讲下如何在手机端预览项目. 1.下载 AppLoader 下载地址:https://docs.apicloud.com/Download/download#apploa ...
- React Native安卓项目打包发布APK步骤
1.产生签名的key 该过程会用到keytool,开发过安卓的都应该接触过该东西.详细请见密钥和证书管理工具.在项目的主目录(不是android文件夹)中执行: --生成签名key,注意记下你的密钥和 ...
- ubuntu/debian安装mysql遇到的问题及解决方法_1.dpkg中mysql-server-5.5 (configure)时出错 mysql-server-5.5 E: Sub-process /usr/bin/dpkg returned an error code (1)
我的debian7之前安装了mysql-server,是通过apt安装的,后来我卸载掉, 然后用whereis mysql查找, 把所有关于mysql的目录删除掉,包括带mysqld的目录及文件. 重 ...
- Eclipse导入到web项目没有run on server
由于以前的项目都是用myeclipse开发的,现在要换成eclipse来开发.但是项目导入到eclipse中发现该项目并不是web项目,也不能部署到tomcat里面去. 现在解决了这个问题了. ...
- C# 中委托和代理是一个概念吗？？
刚刚看了一下资料,发现有些资料说的是代理,有的说是委托,但都是指同一样东西delegate,委托和事件是有关的,因为事件的本质就是多播委托,关于多播委托楼主可以找找资料就知道了. 不过个人觉得这两个概 ...
- 嵌入式开发之uart---rs232 和rs485 和rj45和usb简介
(1) profilebus和can(control控制器局域网)和hub(集线器) (uart)通用异步传输 rs232: ibm 提出的,两根线,按位bit传输,是端到端的单信号电平模式,理论上有 ...
- EXP-00056遇到Oracle错误1455问题解决办法
简单描述一下问题:需要备份一下生产环境的数据库到测试环境,使用EXP命令备份数据库时出现错误 EXP-00056: 遇到 ORACLE 错误 1455 ORA-01455: 转换列溢出整数数据类型 E ...