文档章节

函数防抖和函数节流

o
 osc_odyg6b92
发布于 2018/07/13 15:20
字数 544
阅读 12
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

函数防抖(debounce)

    什么是防抖?短时间内多次触发同一个事件,只执行最后一次,或者只在开始时执行,中间不执行。

  • 不使用防抖和节流,函数不断被触发,数字一直增加
//变量初始化
var xcd = document.getElementById('xcd'),
    count = 1; 
//要执行的操作 数字+1
function doSomething() {
    xcd.innerHTML = count++;
};
//触发onmousemove事件 正常情况下
xcd.onmousemove = doSomething;
  • 使用防抖之绿色基础版
//绿色基础版:
function debounce(doSomething,wait){
    var timeout;//需要一个外部变量,为增强封装,所以使用闭包
    return function(){ var _this = this, _arguments = arguments;//arguments中存着e clearTimeout(timeout); timeout = setTimeout(function(){ doSomething.apply(_this,_arguments); },wait); } } //触发onmousemove事件 xcd.onmousemove = debounce(doSomething,1000);
 
  • 使用防抖之立即执行版
//立即执行版
function debounce(doSomething,wait,isImmediate){
    var timeout;
    return function(){ var _this = this, _arguments = arguments; clearTimeout(timeout); if(isImmediate){ var isTrigger = !timeout; timeout = setTimeout(function(){ timeout = null; }, wait) isTrigger&&doSomething.apply(_this,_arguments); }else{ timeout = setTimeout(function(){ doSomething.apply(_this,_arguments); },wait); } } } //触发onmousemove事件 xcd.onmousemove = debounce(doSomething,1000,true);

函数节流(throttle)

    什么是节流?节流是连续触发事件的过程中以一定时间间隔执行函数。节流会稀释你的执行频率,比如每间隔1秒钟,只会执行一次函数,无论这1秒钟内触发了多少次事件。

  • 使用节流之时间戳版
//绿色基础版之时间戳版
function throttle(doSomething,wait){
    var _this,
        _arguments,
        initTime = 0;
    return function(){ var now = +new Date();//将new date()转化为时间戳 _this = this; _arguments = arguments; if(now - initTime>wait){ doSomething.apply(_this,_arguments); initTime = now; } } } //触发onmousemove事件 xcd.onmousemove = throttle(doSomething,1000);
  • 使用节流之定时器版
//绿色基础版之定时器版
function throttle(doSomething,wait){
    var timeout;
    return function(){ var _this = this; _arguments = arguments; if(!timeout){ timeout = setTimeout(function(){ timeout = null; doSomething.apply(_this,_arguments); },wait); }; } } //触发onmousemove事件 xcd.onmousemove = throttle(doSomething,1000);
  • 使用节流之双剑合璧版
//节流之双剑合璧版
function throttle(doSomething, wait) {
    var timeout, _this, _arguments,
        previous = 0;

    var later = function() { previous = +new Date(); timeout = null; doSomething.apply(_this, _arguments) }; var throttled = function() { var now = +new Date(); //下次触发 doSomething 剩余的时间 var remaining = wait - (now - previous), _this = this; _arguments = arguments; // 如果没有剩余的时间了 if (remaining <= 0) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; doSomething.apply(_this, _arguments); } else if (!timeout) { timeout = setTimeout(later, remaining); } }; return throttled; } //触发onmousemove事件 xcd.onmousemove = throttle(doSomething,1000);


 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.5K
8
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
代码检索工具--CodeQuery

CodeQuery 是一个用来搜索 C/C++、Java 源码的索引工具。基于 cscope 和 ctags 构建,使用 cqmakedb 工具来生成 CodeQuery 数据库文件,然后通过 GUI 工具进行查看。 支持搜索:符号、函数、...

匿名
2013/02/25
2.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

SQL 语句大全

点击上方“掌上编程”,选择“置顶或者星标” 优质文章第一时间送达! 一、基础 「1、说明:创建数据库」 CREATE DATABASE database-name    「2、说明:删除数据库」 drop database ...

GeneralMa
昨天
0
0
山东创睦网络科技有限公司:使用Python爬取全球新冠肺炎疫情数据

使用Python爬取全球新冠肺炎疫情数据 导入所需库包 获取实时数据的url 正式编写程序 查看输出结果 导入所需库包 在获取数据之前,我们需要先安装好所需的包requests和pandas: 1.如果是使用p...

osc_qv1fwke0
54分钟前
14
0
如何1年获得别人3年的工作经验(深度好文)

最近有同学问我,为什么你的工作年限不长,技术却这么厉害,我笑了笑,啥也没说。 我不是不想回答,是不知道怎么回答。在他们的定位可能就是,每方面都懂一点,遇到问题能够快速解决,就是比...

zhang_rick
今天
1
0
新基建带动行业

什么是“新基建”? 什么是“新基建”? 根据央视发布的信息来看,其涵盖了5G基站建设、新能源汽车充电桩、大数据中心、人工智能、工业互联网,特高压,城际以及城轨交通,涉及了七大领域和相...

osc_anefoz50
55分钟前
16
0
怕入错行?这群技术人写了本“择业指南”

计算机专业好找工作吗?哪些方向是当前的主流和热门方向呢? 计算机专业的你是不是还在为职业发展纠结犹豫呢? 刚经历完高考选专业的你是不是还在迷茫徘徊呢? 那么福利来啦! 《软件技术职业...

阿里云云栖号
55分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部