函数节流
指的是某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。
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)复制代码