精简的javascript下throttle和debounce代码
//频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs。立即执行
function throttle(waitMs, fn) {
var lastRun = 0;
return function () {
var now = +new Date;
if (now - lastRun > waitMs) {
lastRun = now;
fn.apply(null, arguments);
}
}
} //空闲控制 返回函数连续调用时,空闲时间必须大于或等于 waitMs,fn 才会执行。延迟执行
function debounce(waitMs, fn) {
var lastCall, args, timeout;
return function r() {
lastCall = +new Date;
args = arguments;
if (!timeout) {
timeout = setTimeout(later, waitMs);
}
}; function later() {
var past = +new Date - lastCall;
if (past > waitMs) {
timeout = null;
fn.apply(null, args)
}
else {
timeout = setTimeout(later, waitMs - past + 1)
}
}
} 调用方法如下:
$(window).resize(debounce(100, function(evt){
......
}));
$(document).mousemove(throttle(40, function(evt){
......
}));
精简的javascript下throttle和debounce代码的更多相关文章
- [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北
网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- 试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别
问题的引出 看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题. 在很多应用中,我们需要控制函数执行的频率, 例如 窗口的 resize,窗口的 scroll 等操作,事件触发的频率非常高 ...
- C#.Net下的防抖-Debounce和节流阀-Throttle功能实现
C#下的防抖-Debounce.节流阀-Throttle功能实现 防抖-Debounce 连续的多次调用,只有在调用停止之后的一段时间内不再调用,然后才执行一次处理过程. 节流阀-Throttle 连 ...
- javascript中的throttle和debounce
throttle 我们这里说的throttle就是函数节流的意思.再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制.主要应用的场景比如: 1.鼠标移动,mousemove 事件2.DOM ...
- 一些精简的JavaScript代码集合
日历 创建过去七天的数组,如果将代码中的减号换成加号,你将得到未来7天的数组集合 // 创建过去七天的数组 [...Array(7).keys()].map(days => new Date(D ...
- 【 js 性能优化】throttle 与 debounce 节流
在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...
- 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流
在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...
- throttle和debounce
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
随机推荐
- 【Docker】Docker主机为什么ip nets 查不到网络空间
创建Docker容器后本来应该有新的命名空间(如果有独立网络的话),那么可以通过 ip netns 命令查看到命名空间,但是实际上却看不到. 查过资料才发现,ip netns 只能查看到 /var/r ...
- github安装&初探
主要记录安装中的问题: 1 centos 5和6的epel源需要不同的包来更新 Centos 5.x wget http://dl.fedoraproject.org/pub/epel/5/x86_6 ...
- spring集成常用技术的配置
使用spring集成其他技术,最基本的配置都是模板化的,比如配置视图模板引擎.数据库连接池.orm框架.缓存服务.邮件服务.rpc调用等,以spring的xml配置为例,我将这些配置过程整理出来,并不 ...
- 获取到Android控件的高度
问题 如何获取一个控件的长和高,相信很多朋友第一眼看见这个问题都会觉得很简单,直接在onCreate里面调用getWidth.getMeasuredWidth不就可以获得了吗,但是,事实上是并没有简单 ...
- ajax实例2
前台: function save() { var username = document.getElementById("username").value; var id = d ...
- 利用python的双向队列(Deque)数据结构实现回文检测的算法
#!/usr/bin/env python # -*- coding: utf-8 -*- # learn <<Problem Solving with Algorithms and Da ...
- Andriod学习笔记1:代码优化总结1
多行变一行 比如说开发一个简单的计算器应用程序,需要定义0-9的数字按钮,第一次就习惯性地写出了如下代码: Button btn0; Button btn1; Button btn2; Button ...
- 已解决:ECSHOP安装出现date_default_timezone_get()问题
今天在安装ECSHOP时遇到警告如下: Warning: date_default_timezone_get(): It is not safe to rely on the system's tim ...
- 简单的后台json,前台解析 操作
后台: List<PageData> KeyWords=plantDefDetailCSAService.findKeyWords(pd); JSONArray array = new J ...
- NOIP2012拓展欧几里得
拉板题,,,不说话 我之前是不是说过数据结构很烦,,,我想收回,,,今天开始的数论还要恶心,一早上听得头都晕了 先来一发欧几里得拓展裸 #include <cstdio> void gcd ...