underscore.js中的节流函数debounce及trottle

时间:2022-12-14 18:40:16

函数节流   throttle and debounce的相关总结及想法

一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeout函数

clearTimeout(cancelTimer);
cancelTimer =setTimeout(function(){
switchControl.switchAciontFactory(view, conf);
},300)
代码的意思就不做多说了,实际上我无意间实现了一个debounce

在underscore.js中对于节流函数有两种定义

trottle:若定义初始间隔100ms,多次触发事件只会触发初始的那一次,事件会与第一次触发的100ms后调起

debounce:对于间隔时间内100ms内发生的调起事件,会不断重置setTimeout的时间

下面来一段trorrle的源码
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
// 上次执行时间点
var previous = 0;
if (!options) options = {};
// 延迟执行函数
var later = function() {
// 若设定了开始边界不执行选项,上次执行时间始终为0
previous = options.leading === false ? 0 : _.now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = _.now();
// 首次执行时,如果设定了开始边界不执行选项,将上次执行时间设定为当前时间。
if (!previous && options.leading === false) previous = now;
// 延迟执行时间间隔
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 延迟时间间隔remaining小于等于0,表示上次执行至此所间隔时间已经超过一个时间窗口
// remaining大于时间窗口wait,表示客户端系统时间被调整过
if (remaining <= 0 || remaining > wait) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
//如果延迟执行不存在,且没有设定结尾边界不执行选项
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};
 

它实际上是通过一个计算,每次触发这个函数的时候获取当前时间,通过与上次存取的时间作对比,计算差值,动态设置setimeout的值,但实际个人觉得做一个阻断log就ok

function throttle(fuc,wait){
if(typeof(changeLog) == 'undefined'){
setTimeout(fuc,wait)
window.changeLog = true
}
}

当然弊端不言而喻,全局声明的变量污染

再去观看debounce的源码,相同的做法但是很奇怪的是,他没有果断重置setTimeout的时间,而是通过时间差值的加减,反正没看出有什么好处。。。

underscore.js中的节流函数debounce及trottle的更多相关文章

  1. 浅谈 Underscore&period;js 中 &lowbar;&period;throttle 和 &lowbar;&period;debounce 的差异

    Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...

  2. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  3. js中如何在一个函数里面执行另一个函数

    1.js中如何在函数a里面执行函数b function a(参数c){ b(); } function b(参数c){ } 方法2: <script type="text/javasc ...

  4. JavaScript -- 时光流逝(七):js中的全局函数

    JavaScript -- 知识点回顾篇(七):js中的全局函数 全局函数可用于所有内建的 JavaScript 对象. (1) encodeURI():把字符串编码为 URI. <script ...

  5. js中的匿名函数和匿名自执行函数

    1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景:   <input type="button" value="点击" id ...

  6. JS中关于把函数作为另一函数的参数的几点小总结

    //JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即可.//当然调用时要穿另一个真正的定义好的函数/*funct ...

  7. js中的Generators函数

    js中的Generators函数 generator一般操作 generator函数的作用就是函数体分段执行,yield表示分隔点 function *test() { console.log(1); ...

  8. JS中的回调函数实例浅析

    本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: ? 1 2 3 document.getElementB ...

  9. 理解Underscore中的节流函数

    上一篇中讲解了Underscore中的去抖函数(_.debounced),这一篇就来介绍节流函数(_.throttled). 经过上一篇文章,我相信很多人都已经了解了去抖和节流的概念.去抖,在一段连续 ...

随机推荐

  1. &period;Net WebApi 实现OAuth2&period;0认证

    现在多数公众平台提供的api都使用OAuth2.0认证模式,最近在搞Android方面的开发,身份认证和权限控制的各方面比较来说,使用OAuth认证的还是比较靠谱,OAuth2.0的协议可以参考htt ...

  2. 智能车学习(十)&mdash&semi;&mdash&semi;MMA8451加速度计的使用

    一.驱动说明: 就是使用I2C的通信方式驱动这款加速度计就行了,代码的话选择使用51单片机的代码进行移植. 二.代码分享: 1.头文件: #ifndef MMA8451_H #define MMA84 ...

  3. MySQL server has gone away的解决方法

    用Python写了一个http服务,需要从mysql读数据库,第一天还好好的,第二天突然不行了.报错如下: pymysql.err.OperationalError: (2006, 'MySQL se ...

  4. LoadRunner脚本 《第二篇》

    一.基础函数简介 在VU左边导航栏中,有三个LoadRunner框架函数,分别是vuser_init().Action().vuser_end().这三个函数存在于任何Vuser类型的脚本中. vus ...

  5. HDU 4035Maze&lpar;树状&plus;概率dp,绝对经典)

    题意: 给你n个节点的树,从1节点开始走,到每个节点都有三种情况,被杀死回到1节点,找到隐藏的出口出去,沿着当前节点相邻的边走到下一个节点,给出每个节点三种情况发生的概率分别为ki,ei,1-ki-e ...

  6. ABP应用层——数据传输对象(DTOs)

    ABP应用层——数据传输对象(DTOs) 基于DDD的现代ASP.NET开发框架--ABP系列之16.ABP应用层——数据传输对象(DTOs) ABP是“ASP.NET Boilerplate Pro ...

  7. Nodejs的运行原理-架构篇

    前言 本来是想只做一个Nodejs运行原理-科普篇,但是收到了不少私信,要我多分享一些更进阶,更详细的内容,所以我会在接下来的两个月里继续更新Nodejs运行原理. PS:此系列只做Nodejs的运行 ...

  8. web技术发展历程--读《大型网站技术架构&lowbar;核心原理与案例分析》

    1 早期的web服务 2 CGI程序的出现.发展.凋零到MVC的兴起 CGI:通用网关接口技术. 随着CGI技术的出现,web服务端可以通过不同的用户请求产生动态页面内容. web服务器将请求数据交给 ...

  9. JUC中AQS简介

    AQS,在java.util.concurrent.locks包中,AbstractQueuedSynchronizer这个类是并发包中的核心,了解其他类之前,需要先弄清楚AQS.在JUC的很多类中都 ...

  10. OI中坑点总结

    以下是我个人OI生涯中遇到的坑点的一个小总结,可能是我太菜了,总是掉坑里,请大佬勿喷 1,多重背包的转移的循环顺序 //默认每个物品体积为一(不想打码……) //dp[i]表示占用背包容量i所能获得的 ...