发表于 | 分类于 
1
2
3
4
5
6
7
8
9
// 防重复点击
stopReapeatEvent=function (obj) {
    if (obj.callFlag) return true;
    obj.callFlag=!obj.callFlag;
    clearTimeout(obj.iTime);
    obj.iTime=setTimeout(function(){
        obj.callFlag=!obj.callFlag;
    }, 1000);
}
1
2
//调用
if(stopReapeatEvent(arguments.callee))  return ;

发表于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 阻止屏幕滚动
window.Common.TOP_stopBodyScroll=0;
window.Common.stopBodyScroll=function (isFixed) {
    if (isFixed) {
        window.Common.TOP_stopBodyScroll = window.scrollY
    
        document.body.style.position = 'fixed'
        document.body.style.top = -window.Common.TOP_stopBodyScroll + 'px'
    } else {
        document.body.style.position = ''
        document.body.style.top = ''
    
        window.scrollTo(0, window.Common.TOP_stopBodyScroll) // 回到原先的top
    }
}

作者：连城
链接：https://juejin.im/post/5a27cad56fb9a045186a9d94
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

发表于 | 分类于

1.

1
2
3
var Func=function(){  
};  
var func=new Func ();

new共经过了4几个阶段

1、创建一个空对象

1
varobj=new Object();

2、设置原型链

1
obj.__proto__= Func.prototype;

3、让Func中的this指向obj，并执行Func的函数体。

1
var result =Func.call(obj);

4、判断Func的返回值类型：

如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

1
2
3
4
5
6
if (typeof(result) == "object"){  
  func=result;  
}  
else{  
    func=obj;;  
}

2.第二种解析

1
2
3
4
5
6
7
function create() {
  let obj = {}
  let Con = [].shift.call(arguments)
  obj.__proto__ = Con.prototype
  let result = Con.apply(obj, arguments)
  return result instanceof Object ? result : obj
}

Arguments对象有一个callee 属性，可以获取当前函数，这个属性在arguments的第一个位置 ，所以 [].shift.call(arguments) 将arguments转为数组后调用shift, 拿到第一个元素 callee

参考链接

发表于 | 分类于

先来看看offsetParent返回的是什么值

ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素，如果没有父元素或者是父元素中没有一个是定位过的，返回值就是body元素

ele.offsetLeft和ele.offsetTop取值问题，分多种情况：

如果ele是body的直接子元素，返回值则是ele距离body左侧或顶部的距离
如果ele不是body的直接子元素，在父元素进行定位(relative,absolute)的情况下，各浏览器返回值都是ele距离父元素左侧或者是顶部的距离（唯一的区别就是chrome没有把边框计算进去，IE,firefox都计算进去了）
如果ele不是body的直接子元素，父元素也没有进行定位的情况下，各浏览器返回的直接是ele元素距body的距离

从上面可以看出offsetLeft、offsetTop返回的值就是ele到offsetParent的距离，这个offsetParent是什么元素要看ele的父元素有没有进行定位（relative、absolute）

参考链接

发表于 | 分类于

link,link

debounce(func, wait, immediate)：

创建并返回函数的防反跳版本，将延迟函数的执行（真正的执行）在函数最后一次调用时刻的 wait 毫秒之后，对于必须在一些输入（多是一些用户操作）停止之后再执行的行为有帮助。将一个连续的调用归为一个！

throttle(func, wait, options)：

创建并返回一个像节流阀一样的函数，当重复调用函数的时候，最多每隔指定的 wait 毫秒调用一次该函数； 不允许方法在每 wait ms 间执行超过一次！

举个例子：页面存在一个按钮，通过 throttle 和 debounce 包括其监听函数，wait 设置为 1000ms。确保在每个 1000ms 内都多次触发 click 持续 2000ms。

1
2
3
4
// 执行1次(最后一次点击1000ms后)
btnDom.addEventListener('click', debounce(clickBtn, 1000));
// 执行3次(点击立即执行一次、1000ms后执行一次，2000ms后执行一次)
btnDom.addEventListener('click', throttle(clickBtn, 1000));

debounce 使用场景：

第一次触发后，进行倒计 wait 毫秒，如果倒计时过程中有其他触发，则重置倒计时；否则执行 fn。用它来丢弃一些重复的密集操作、活动，直到流量减慢。例如：

  • 对用户输入的验证，不在输入过程中就处理，停止输入后进行验证足以；
  • 提交 ajax 时，不希望 1s 中内大量的请求被重复发送。

throttle 使用场景

第一次触发后先执行 fn（当然可以通过{leading: false}来取消），然后 wait ms 后再次执行，在单位 wait 毫秒内的所有重复触发都被抛弃。即如果有连续不断的触发，每 wait ms 执行 fn 一次。与 debounce 相同的用例，但是你想保证在一定间隔必须执行的回调函数。例如：

  • 对用户输入的验证，不想停止输入再进行验证，而是每 n 秒进行验证；
  • 对于鼠标滚动、window.resize 进行节流控制。

正真的业务场景：

一个相当常见的例子，用户在你无限滚动的页面上向下滚动鼠标加载页面，你需要判断现在距离页面底部多少。如果用户快接近底部时，我们应该发送请求来加载更多内容到页面。在此 debounce 没有用，因为它只会在用户停止滚动时触发，但我们需要用户快到达底部时去请求。通过 throttle 我们可以不间断的监测距离底部多远。

发表于 | 分类于

博客园

关于堆栈的溢出问题，在Javascript日常开发中很常见，Google了下，相关问题还是比较多的。本文旨在描述如何解决此类问题。 首先看一个实例(当然你可以使用更容易的方式实现，这里我们仅探讨递归)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function isEven (num) {
    if (num === 0) {
        return true;
    }
 
    if (num === 1) {
        return false;
    }
 
    return isEven(Math.abs(num) - 2);
}
 
//Outputs: true
console.log(isEven(10));
 
//Outputs: false
console.log(isEven(9));

当我们把参数改成10000时，运行下例会发生堆栈溢出：//Outputs: Uncaught RangeError: Maximum call stack size exceeded

使用闭包：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function isEven (num) {
    if (num === 0) {
        return true;
    }
 
    if (num === 1) {
        return false;
    }
 
    return function() {
        return isEven(Math.abs(num) - 2);
    }
}
//Outputs: true
console.log(isEven(4)()());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function isEven(n) {
    /**
     * [isEvenInner 递归]
     * @param  {[type]}  num [description]
     * @return {Boolean}     [description]
     */
    function isEvenInner (n) {
        if (n === 0) {
            return true;
        }
 
        if (n === 1) {
            return false;
        }
 
        return function() {
            return isEvenInner(Math.abs(n) - 2);
        }
    }
    /**
     * [trampoline 迭代]
     * @param  {[type]} func [description]
     * @param  {[type]} arg  [description]
     * @return {[type]}      [description]
     */
    function trampoline (func, arg) {
        var value = func(arg);
 
        while(typeof value === "function") {
            value = value();
        }
 
        return value;
    }
 
    return trampoline.bind(null, isEvenInner)(n);
}
//Outputs: true
console.log(isEven(10000));
 
//Outputs: false
console.log(isEven(10001));