2019-3-30

<video class="player__video viewer" src="652333414.mp4"></video>
video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
video.addEventListener('timeupdate', handleProgress)

HTMLElement.offsetTop

window.innerHeight

window.innerWeight

window.scrollY

debounce 防抖

function debounce(fn, wait) {
    let timeOut;
    console.log(this); //windows
    return function cb() {
        console.log(this) //<div>
        clearTimeout(timeOut);
        timeOut = setTimeout(fn, wait);
    }
}
container.addEventListener('mousemove', debounce(action, 100));
// debounce函数里this指向windows
// 被return的cb()函数里的this才指向DOM节点
// 更清晰的写法：
// const myDebounce = debounce(action, 100);
// container.addEventListener('mousemove', myDebounce);

let counter = 1;
const container = document.getElementById('container');
function action(e) {
    container.innerHTML = counter;
    counter++;
    console.log(this);
    console.log(e);
}
function debounce(fn, wait, immediate = true) {
    let timeOut;
    return function cb() {
        if (timeOut) clearTimeout(timeOut);
        if (immediate) {
            let callNow = !timeOut;
            timeOut = setTimeout(() => timeOut = null, wait);
            if (callNow) fn.apply(this, arguments);
        } else {
            timeOut = setTimeout(fn.bind(this, ...arguments), wait);
        }
    }
}
container.addEventListener('mousemove', debounce(action, 100));
// 这一小段代码里面有一万个知识点：
// 1. bind, apply, call 都可以用来绑定this, 但是bind不会立即执行函数。
//    bind返回的是一个绑定了this函数，而不是函数的执行结果。
//    由于apply和call会立即执行函数，上例中的bind如果想改写成apply，应该在func.apply的
//    外面再包裹一个函数，而由于被包裹了一个函数，我们有需要从“外面“借this进来：
//    function debounce(func, wait) {
//        var timeout;
//  
//        return function () {
//            var context = this;
//            var args = arguments;
//    
//            clearTimeout(timeout)
//            timeout = setTimeout(function(){
//                func.apply(context, args)
//            }, wait);
//        }
//    }
// 2. function.call(thisArg, arg1, arg2, ...)
//    function.apply(thisArg, [args])
//    function.bind(thisArg, arg1, arg2, ...)
// 3. 每一个新的function关键词，都会开启一个新的函数作用域，都会有新的this和arguments，
//    当然箭头函数另算。
// 4. setTimeout里面的回调函数，只能写函数名！！！不要带括号，带括号表示立即执行，
//    带了括号setTimeout函数会失效，函数会被立即执行。

throttle 节流

来一个最简单的节流吧。。比较好看出节流和防抖的区别

function throttle(fn, wait) {
    let previous = 0;
    return function cb() {
        const now = + new Date();
        if (now - previous > wait) {
            fn.apply(this, arguments);
            previous = now;
        }
    }
}

节流是规定每一段时间只能触发一次
防抖是，如果你一直抖，我就一直不触发。。。直到你不抖了我再触发
Visualization: http://demo.nimius.net/debounce_throttle/