分时函数

解决问题： 在渲染列表时，如果一次性渲染的列表数目过多，短时间添加大量 DOM节点会让浏览器吃不消，我们看到的结果往往是浏览器卡顿甚至假死

// arr 要被渲染到浏览器的数组
// fn 具体怎么生成到浏览器的方法
// count 每个时间段生成到浏览器的数目
// intervalTime 时间段间隔时间

 var timeChunk = function (arr, fn, count, intervalTime) {
      var obj,  t;
      var len = arr.length;
      //在这里处理数据，每生成一个就从数组中去掉一个
      var start = function () {
        for (var i = 0; i < Math.min(count || i, len); i++) {
          var obj = arr.shift();  //每添加一项就去掉一项
          fn(obj);   //执行插入方法
        }
      }

     //  返回一个渲染数据的周期函数
      return function () {
        t = setInterval(function () {
          if (arr.length == 0) {
            return clearInterval(t)  //插入完毕之后清除周期函数
          }
          start()  //执行生成函数
        }, intervalTime)
      }
    }

     //生成要被渲染的数据列表
      var arr = [], i = 1 ;
      while (i<1001) {
        arr.push(i);
        i++
      }

  // 传入参数，获得数据渲染周期函数
    var renderFriendList= timeChunk (arr, function (n) {
        var div = document.createElement('div');
        div.innerHTML = n;
        document.body.appendChild(div)
      }, 8, 200)  //每200毫秒执行8次插入dom函数

   // 执行渲染
    renderFriendList()

思路：每指定时间内（ intervalTime）生成指定数目的节点（count），这样就可以避免因短时间生成大量dom节点导致浏览器卡顿

函数柯里化

函数柯里化又叫函数求值，一个currying 函数接受到参数时并不会求值，而是返回另外一个函数。刚才传入的参数在函数形成的闭包中被保留下来。待到函数真正需要求值的时候，之前传入的参数都会被一次性求值。

    // 这个函数用来存储传入的参数，传入参数时存储，不传入时进行计算
      var currying = function (fn) {
        var args = [];  //传入的数据都被缓存在这里，在符合条件时一并传给计算函数

        return  function () {
          if (arguments.length == 0) {
            return fn.apply(this, args )
          } else {
            [].push.apply(args, arguments)
            return arguments.callee  // （这句可不要）返回自身，在后面可以这样用 cost(100)(200)
          }
        }
      }

     // 进行具体数据处理计算的方法
        var cost = function(){
          var money = 0 ;
          for (var i = 0, l = arguments.length; i < l; i++) {
            money += arguments[i]
          }
          return money
        }

var cost = currying( cost );

   cost( 100 );
   cost( 100 );
   cost( 100 );

console.log( cost() )   //300

函数节流

在某些场景下，函数有可能被非常频繁的调用，而造成一些比较大的性能问题。如：

1. window.onresize事件
   如果我们在window.onresize事件的函数里有一些跟DOM节点相关的操作，而跟DOM节点相关的操作往往会非常消耗性能，这时候浏览器就可能造成卡顿现象

2.mouse.move事件
如果我们给一个div绑定一个拖拽事件，也会频繁的触发该拖曳函数

3.上传进度
微云上传功能使用了一个浏览器插件，该插件在真正开始上传文件之前，会对文件进行扫描并随时通知javascript 函数，以便页面显示上传进度，但该插件通知频率极高，很显然，我们不需要这么频繁的去提示用户

总结来说就是，函数节流可以在我们不需要某些函数频繁触发时使用。

具体实现：

var throttle = function (fn, interval) {
        var  timer, firstTime = true;

        return function () {
          var args = arguments;
          var _me = this;

           if ( firstTime ) {
             fn.apply(_me, args)
             return firstTime = false;
           }

           if ( timer ) {
             return false
           }

           timer = setTimeout(function () {
             clearTimeout(timer);
             timer=null;
             fn.apply(_me, args)
           }, interval || 500)
        }

    }

    window.onresize = throttle (function () {
         console.log(1)
      }, 500)