美文网首页
几个有趣的js函数

几个有趣的js函数

作者: CoderGLM | 来源:发表于2016-06-15 19:24 被阅读678次

新博客地址:http://gengliming.com

小函数蕴含着大学问

函数节流:水龙头与弹簧

--什么是节流,请自行百谷--

  • Throttle:这种方式是类似水龙头,当水滴足够大时水滴就会掉下来;类似的,当时间超过某个timeout的时候就执行函数
var throttle = function(fn, timeout) {
      var last = new Date().getTimes();

      return function() {
        var curr = new Date().getTimes();
        if (curr - last >= timeout) {
          fn.apply(this, arguments);
        }
      };
};

忽然想到一个问题,如果需要节流的是scroll事件,如果滚动的时间超短上面函数岂不是不能执行了,那就这样实现:

var throttle = function(fn, timeout, delay) {
    var timer = null,
    last = new Date().getTimes();

    return function() {
      var curr = new Date().getTimes(),
          context = this,
          args = arguments;

      if (curr - last >= timeout) {
        clearTimeout(timer);
        timer = null;
        last = curr;
        fn.apply(context, args);
      } else {
        timer = setTimeout(function() {
                  fn.apply(this, arguments);
                }, delay);
      }
    };
};
// 上面这一串代码居然需要我手动缩紧,也是醉了
  • Debounce:bounce是反弹的意思,debouce就是不让弹,就像弹簧一样,你一直按着它,直到放手它才能弹起来;这种思想拿到节流来说就是:如果你一直滚动,那函数就一直不响应,直到你不滚动我才执行:
var debounce = function(fn, delay) {
  var timer = null;
  return function() {
    var context = this,
        args = arguments;

    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
};

尾递归优化

不知道尾递归?参考中文版,什么?看不懂中文?那就来这里英文版

  • Trampoline:蹦床函数,为何叫蹦床?没明白。这个函数的作用是把递归通过循环实现。
function trampoline(fn) {
    while (f && f instanceof Function) {
      f = f();
    }
    return f;
  }
  function sum(x, y){
    if (y > 0) {
      return sum.bind(null, x+1, y-1);
    } else {
      return x;
    }
}
trampoline(sum(1,100000));
  • Tco:不用修改原函数的尾递归优化,我喜欢这个函数,因为它不太好理解,看不懂的朋友请参考上面的链接。
function tco(fn) {
      var value,
        active = false,
        accumulated = [];

    return function accumulator() {
      accumulated.push(arguments);
      // console.log(active);
      if (!active) {
        active = true;
        while (accumulated.length) {
          value = fn.apply(this, accumulated.shift());
        }
        console.log(value);
        active = false;
        return value;
      }
    };
}
var sum = tco(function(x, y) {
    if (y > 0) {
      return sum(x+1, y-1);
    } else {
      return x;
    }
});
console.log(sum(1, 10000));

参考

JS魔法堂:函数节流(throttle)与函数去抖(debounce):这里貌似比我说的更形象
Understanding recursion in functional JavaScript programming:简单看了看代码,主要内容还是看的中文版的(在下面);
函数的扩展:这是es6教程中的其中一课,往下拉往下拉然后就看到“尾递归”了, 如果嫌麻烦,那就点上面的锚点.

相关文章

  • 几个有趣的js函数

    新博客地址:http://gengliming.com 小函数蕴含着大学问 函数节流:水龙头与弹簧 --什么是节流...

  • Js典型的几个函数

    自己在练习的过程中,碰到一些典型的函数,在这里记录一下,包括 获取URL中的参数 每隔五秒运行一次函数直到1分钟停...

  • js的几个简单函数

    js的几个简单函数 1.toFixed(n)函数,四舍五入保留n位小数点var a = 133.55644444;...

  • 那些年成为node攻城狮的路(七)

    函数 函数声明和函数表达式 *函数中的几个属性 arguments 在node.js中为{0:value1.......

  • js中的几种兼容函数

    今天给大家分享几个在js中会遇到的兼容函数。 //1.兼容函数(addEventListener)function...

  • JS高级-函数的几个属性

    name:函数的名字,是只读的,不能修改arguments:实参的个数length:函数定义的时候形参的个数cal...

  • JavaScript 05 函数

    js函数的概念和作用,js函数的定义,js函数的调用,js事件驱动的概念,js函数的实参和形参,js的作用域,js...

  • 总结一下js的函数类型

    几个概念 在js中,函数就是个对象 函数名就是个指向函数对象的指针 函数的三种声明方式 函数声明 函数表达式 使用...

  • 2020-11-07

    JS 函数的执行时机 函数的执行时机不同结果也会不同,js也分为同步执行和异步执行 简单的举几个同步执行例子1、 ...

  • js 深入

    * js语法* js的动态函数和匿名函数* js动态函数Functionnew Function();* 匿名函数...

网友评论

      本文标题:几个有趣的js函数

      本文链接:https://www.haomeiwen.com/subject/nydpdttx.html