函数防抖和函数节流

函数节流

指的是某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。

function throttle(method, context) {
     clearTimeout(method.tId);
     method.tId = setTimeout(function() {
        method.call(context);
   }, 100)
}复制代码

函数防抖

输入input监听输入的时候如果一直发请求与后端进行校验，就会引起抖动。使用防抖函数之后每新建一个定时器，就会在下一个定时器之前清除。这个方法的重点是，它在用户不触发事件时，才触发动作，并且抑制了本来在事件中要执行的动作。

function debounce(func, delay) {

    var timeout;

    return function(e) {

        console.log("清除",timeout,e.target.value)

        clearTimeout(timeout);

        var context = this, args = arguments

        console.log("新的",timeout, e.target.value)

        timeout = setTimeout(function(){

          console.log("----")

          func.apply(context, args);

        },delay)

    };

};

 

var validate = debounce(function(e) {

    console.log("change", e.target.value, new Date-0)

}, 380);

 

// 绑定监听

document.querySelector("input").addEventListener('input', validate);复制代码

函数绑定

bind函数接收一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去

function bind(fn, context) {
    return function() {
        return fn.apply(context, arguments);
    };
}复制代码

在bind中创建了一个闭包，闭包使用apply()调用传入的函数，并给apply()传递context对象和参数

函数柯里化

使用一个闭包返回一个函数，跟bind的区别在于，在函数被调用时，返回的函数还需要设置一些传入的参数。

柯里化函数的创建： 调用另一个函数并为它传入要柯里化的函数和必要参数

function curry(fn) {
   var args = Array.prototype.slice.call(arguments, 1);
    return function() {
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return fn.applay(null, finalArgs);
    }
}复制代码

curry()函数的主要工作是将返回函数的参数进行排序，curry的第一个参数是要进行柯里化的函数，其他参数是要传入的值。

重复定时器

setTimeout(function() {
    var div = document.getELementById("myDiv");
    left = parseInt(div.style.left) + 5;
    div.style.left = left + "px";
    if (left < 200) {
        setTimeout(arguments.callee, 50);    
    }
}, 50)
复制代码