再谈javascript函数节流
之前写过但是不记得在哪了，今天同事要一个滑到页面底部加载更多内容的效果，又想起了这玩意儿，确实挺实用和常用的，谨此记之。
函数节流从字面上的意思就是节约函数的执行次数，其实现的主要思想是通过定时器阻断函数的连续执行，尤其适合用在频繁操作，比如window的resize和scroll事件等。
window的默认scroll事件间隔时间大概只有十几毫秒，如果频繁的scroll，然后去请求，然后渲染，对性能肯定有很大的影响。
大概模式:
var processor = {
timer: null,
performProcessing: function(){
// 要执行的代码
},
process: function(){
clearTimeout(this.timer);
this.timer= setTimeout(function(){
processor.performProcessing();
}, 100);
}
};
//调用
processor.process();
performProcessing是要频繁执行的函数，每次process会把之前的定时器timer给清除掉。简单来说，就是performProcessing每次会延迟100ms执行，如果在这段时间内又被执行，每次都会把前面的给clear掉，保证100ms内只会执行一次。
impress通过闭包实现的函数节流：
function throttle(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
两种方法各有优劣，前一个封装函数的优势在把上下文变量当做函数参数，直接可以定制执行函数的this变量；后一个函数优势在于把延迟时间当做变量。
举个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(++n);
} function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
window.onresize=throttle(resizehandler,500);//因为返回函数句柄，不用包装函数了
</script>
</body>
</html>
函数节流升级版
var throttleV2 = function(fn, delay, mustRunDelay){
var timer = null;
var t_start;
return function(){
var context = this, args = arguments, t_curr = +new Date();
clearTimeout(timer);
if(!t_start){
t_start = t_curr;
}
if(t_curr - t_start >= mustRunDelay){
fn.apply(context, args);
t_start = t_curr;
}
else {
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
};
};
window.onresize = throttleV2(myFunc, 50, 100);
升级版的作用是myFun间隔50ms执行一次，100ms内必须执行，因为有可能你在50ms内使劲执行myFun，这个时候timer会被clear掉，就会导致事件永远不会执行，这是比较极端的情况。
再谈javascript函数节流的更多相关文章
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 简述JavaScript函数节流
为什么要用函数节流 浏览器中某些计算和处理要比其他的昂贵很多.例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至 ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- 再谈JavaScript的数据类型问题
JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...
- [转载]浅谈JavaScript函数重载
原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...
- 再谈javascript面向对象编程
前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...
- 再谈 javascript 数组去重
前言 数组去重方法老生常谈,既然是常谈,我也来谈谈 双层循环 也许我们首先想到的是使用 indexOf 来循环判断一遍,但在这个方法之前,让我们先看看最原始的方法: var array = [1,1, ...
- [转]浅谈javascript函数劫持
转自:Ph4nt0m Security Team 这么多年了,现在学习依然还是有很多收货,向前辈致敬.转载一方面是自己存档一份,另一方面是让更多喜欢安全的人一同学习. ================ ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
随机推荐
- linux中python配置tab=4个空格，并显示行号。
vim ~/.vimrc 写入: set ts=4 set nu :wq 保存. source ~/.vimrc 使之生效.
- 使用 Hexo + github 搭建个人博客
来自:http://www.cnblogs.com/fengzheng/p/8031518.html Hexo 是什么 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或 ...
- (转)使用VS实现XML2CS
转自 StackOverFlow Method 1 XSD tool Suppose that you have your XML file in this location C:\path\to\x ...
- Kotlin Eclipse 环境搭建
Kotlin是JetBrains开发的基于JVM的语言.JetBrains是一家捷克的软件开发公司,该公司位于捷克的布拉格,研发了IntelliJ IDEA这款相对于Eclipse有较大改善的大名鼎鼎 ...
- HTML02--引用样式、表格、列表、div布局
接上一篇“HTML01随笔” 1.使用样式: 内联样式:标签中使用style属性 内部样式:<head>使用<style type="text/css" ...
- 说说MySQL权限
前言 今天继续MySQL系列文章,讲讲MySQL权限相关的内容.我们都知道,在写系统的时候,都会有权限相关的服务,以达到权限控制的目的.以最简单的权限菜单为例: 管理员拥有最大权限,可以查看系统下所有 ...
- Redis学习笔记（6）——SpringDataRedis入门
一.SpringDataRedis简介 Spring-data-redis是spring大家族的一部分,提供了在srping应用中通过简单的配置访问redis服务,对reids底层开发包(Jedis, ...
- pygame学习_part1_pygame写程序前的准备工作
import pygame from pygame import * pygame.init() #准备pygame,不准备无法使用功能 pygame.display.set_mode((x,y坐标) ...
- mono for android读书笔记之硬件编程(转)
本章将会介绍: 传感器的API 加速器编程,设备的方向,近场检测 网络编程 蓝牙编程 上述的技术的应用场景很多,比如: 1.检测当前的网络是否可用,并提醒用户,检测当前的网络类型,比如Wifi.3G. ...
- WCF系列教程之WCF中的会话
本文参考自http://www.cnblogs.com/wangweimutou/p/4516224.html,纯属读书笔记,加深记忆 一.WCF会话简介 1.在WCF应用程序中,回话将一组消息相互关 ...