最近一个面试官问了我一个函数节流的问题，然后感觉自己工作中遇到过这个问题，但是不知道这种形式就是函数节流。下面我来说下这个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函数节流的更多相关文章

  1. 也谈js函数节流

    1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...

  2. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  3. Underscore.js 函数节流简单测试

    函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js  本省就包含了函数节流的处理函数 _.throttle 和 _.debo ...

  4. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  5. 深入理解JS函数节流和去抖动

    一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...

  6. JS函数节流和防抖

    看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...

  7. JS函数节流代码实现

    函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...

  8. JS函数节流

    背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...

  9. JS 函数节流与防抖

    前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...

随机推荐

  1. [译]Java 设计模式之装饰器

    (文章翻译自Java Design Pattern: Decorator – Decorate your girlfriend) 1.装饰模式的来历 让我们假设你在寻找一个女朋友.有来自像没美国中国日 ...

  2. LeetCode之Max Points on a Line Total

    1.问题描述 Given n points on a 2D plane, find the maximum number of points that lie on the same straight ...

  3. mysql的架构

    和其他数据库相比,mysql有点与众不同,它的架构可以在多种不同场景中应用并发挥好的作用,而理解其设计是发挥好作用的先决条件 每当我们在想起mysql的逻辑架构师,我们可以构造一副mysql各组件之间 ...

  4. [Phonegap+Sencha Touch] 移动开发24 包wp8.1的App，弹出软键盘输入框聚焦实施后，无移动采收率方法来解决接口

    这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile ...

  5. 在Ubuntu上安装 nginx, MySQL, PHP (LEMP),phpmyadmin和WordPress

    0)更新 Apt-Get 终端命令:sudo apt-get update 1) 安装php sudo apt-get install php5 2)安装MySql 终端命令: sudo apt-ge ...

  6. VS 文件自动定位功能

    在Visual Studio 中,当你在所有打开的文件中进行切换时,在Solution Explorer中也会自定定位到这个文件的目录下面,这个功能用来查找当前文件是非常有用.在Tools->O ...

  7. 使用shell+awk完成Hive查询结果格式化输出

    好久不写,一方面是工作原因,有些东西没发直接发,另外的也是习惯给丢了,内因所致.今天是个好日子,走起! btw,实际上这种格式化输出应该不只限于某一种需求,差不多是通用的. 需求: --基本的:当前H ...

  8. Web Api 图片上传，在使用 Task.ContinueWith 变量无法赋值问题

    细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法!   在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找 ...

  9. MVC视图中的@Html.xxx(...)

    ASP.NET MVC视图中的@Html.xxx(...)   问题 在视图页中@Html.xxx(...)是什么?如何被执行? 如下图所示: 解疑 视图页中@Html.xxx(...)涉及的内容有: ...

  10. [转]gdb 调试 objc

    源:http://bbs.pediy.com/showthread.php?t=159549 3. 在没有 symbols的情况下,想要下断 objc method 或者 private framew ...