结构-行为-样式-Js函数节流
最近一个面试官问了我一个函数节流的问题，然后感觉自己工作中遇到过这个问题，但是不知道这种形式就是函数节流。下面我来说下这个Js的高级问题，思路：函数节流就是防止用户高频调用某个事件而做的Js层面的处理方法。主要就是在一定时间内让用户的操作只执行一次指定方法。
代码实现（html）：
<!doctype html>
<html>
<head>
</head>
<body>
<button id="clickme" value="">点我，我不理你</button>
</body>
<script src="test.js"></script>
</html>
代码实现（Js）：
function ST(num , fun){
if(!ST.prototype.isopen){
ST.prototype.isopen = "ok";
setInterval(function(){
return ST.prototype.isopen = "ok";
},num);
return fun;
}
if(ST.prototype.isopen == "ok"){
ST.prototype.isopen = "no";
return fun;
}
}
document.getElementById("clickme").addEventListener('click',function(){
var myFun = ST(6000,function(){
return console.log("this :" +Math.random(10));
})
if(typeof myFun === "function")
myFun();
});
当然啦，这个只是本人在没有参照的情况下自己的实现，其实社区中早就有人提出了这个最佳实践（可能需要FQ）
下面这个就是社区中的最佳实践：
var movers = document.querySelectorAll('.mover'),
lastScrollY = 0,
ticking = false;
/**
* Set everthing up and position all the DOM elements
* - normally done with the CSS but, hey, there's heaps
* of them so we're doing it here!
*/
(function init() {
for(var m = 0; m < movers.length; m++) {
movers[m].style.top = (m * 10) + 'px';
}
})();
/**
* Callback for our scroll event - just
* keeps track of the last scroll value
*/
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
/**
* Calls rAF if it's not already
* been done already
*/
function requestTick() {
if(!ticking) {
requestAnimationFrame(update);
ticking = true;
}
}
/**
* Our animation callback
*/
function update() {
var mover = null,
moverTop = [],
halfWindowHeight = window.innerHeight * 0.5,
offset = 0;
// first loop is going to do all
// the reflows (since we use offsetTop)
for(var m = 0; m < movers.length; m++) {
mover = movers[m];
moverTop[m] = mover.offsetTop;
}
// second loop is going to go through
// the movers and add the left class
// to the elements' classlist
for(var m = 0; m < movers.length; m++) {
mover = movers[m];
if(lastScrollY > moverTop[m] - halfWindowHeight) {
mover.classList.add('left');
} else {
mover.classList.remove('left');
}
}
// allow further rAFs to be called
ticking = false;
}
// only listen for scroll events
window.addEventListener('scroll', onScroll, false);
实现原理都是一样的，欢迎大家流言。
结构-行为-样式-Js函数节流的更多相关文章
- 也谈js函数节流
1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- Underscore.js 函数节流简单测试
函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js 本省就包含了函数节流的处理函数 _.throttle 和 _.debo ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- 深入理解JS函数节流和去抖动
一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...
- JS函数节流和防抖
看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...
- JS函数节流代码实现
函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...
- JS函数节流
背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...
- JS 函数节流与防抖
前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...
随机推荐
- qq音乐的歌词接口中例如:，.的特殊符号编码使用js进行转义
从qq音乐的歌词接口中得到这样的代码 jsonp11({"retcode":"0","code":"0","s ...
- Fedora 20 Gnome安装及配置记录
下载了F20的Gnome版,原先安装的是19KDE的,原因是昨晚看书,觉得电脑开着也没什么事情,倒不如看看能不能升级或下载点东西 原先是KDE的界面,所以打算换换风格,使用下Gnome,不过更换过程总 ...
- 解决水晶报表提示“未知的查询引擎错误” FOR VS2010
原文:解决水晶报表提示“未知的查询引擎错误” FOR VS2010 在VS2010环境下运行水晶报表(当然要先装上Crystal Report For VS2010), 在SetDataSource方 ...
- LINUX SCP 远程 文件 复制
首先,以确保直接两个机器IP可以在每个ping通过 然后使用SCP命令从第一台主机向第二台主机复制文件 scp src chiwei@192.168.8.144:/home/chiwei/mydisk ...
- 一步一步实现基于Task的Promise库（四）无参数的WorkItem
接着上一篇我直接给出代码,现在支持了new Task(), then(), all(), any() 这些不传参的调用方式. (function(){ var isFunction = functio ...
- Date的使用
方法 说明 Date() 返回当日的日期和时间 getDate() 获取当天(1-31) getDay() 获取当天的星期(0-6) getMonth() 获取月份(0-11) getFullYear ...
- 一个小团队TDD游戏及实践
介绍的这个游戏是自己根据目前带的团队的实际情况来制定的, 在游戏实践过程中,收到了较好的效果,故打算把这个游戏分享出来,一是分享一下实践,而是集思广益,不断完善,更好的利用游戏来锻炼队伍.下面就将游戏 ...
- bootstrap + angularjs + seajs构建Web Form前端(1)
bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...
- 使用typeof方法反射属性和方法
Type type = typeof(System.Int32);//获得int类型的Type对象 foreach (MethodInfo method in type.GetMethods())// ...
- 2013.4.A
=-=最近简直忙疯了.....两眼泪汪汪的...一个星期又磨磨蹭蹭的刷了一套 1.java_c 题1 Java vs C++ [问题描述] Java和C++两种语言的辩手都可以相互争论数小时去证明他们 ...