博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
函数防抖和函数节流
阅读量:6509 次
发布时间:2019-06-24

本文共 1780 字,大约阅读时间需要 5 分钟。

函数节流

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

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)复制代码

转载地址:http://trbfo.baihongyu.com/

你可能感兴趣的文章
IE6下实现min-height
查看>>
Nginx服务状态的监控
查看>>
centos各分区用途
查看>>
Head First--设计模式
查看>>
iOS之CAGradientLayer属性简介和使用
查看>>
微信小程序UI组件、开发框架、实用库
查看>>
正则表达式
查看>>
模块化Javascript代码的两种方式
查看>>
Money去哪了- 每日站立会议
查看>>
Python数据结构和算法学习笔记1
查看>>
正则之从dom字符串中提取url
查看>>
大数据——基础概念
查看>>
第六次上机实验
查看>>
机器学习温和指南
查看>>
解决Geoserver请求跨域的几种思路,第二种思路用过
查看>>
最短路-Bellman-Ford算法
查看>>
Object 类有哪些方法
查看>>
oracle 将一个表复制到另外一个表里 .
查看>>
libcurl以get方式请求服务器端文件
查看>>
复杂的数据类型3 - C++快速入门09
查看>>