当前位置: 首页 > news >正文

函数防抖和函数节流

函数节流

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

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


相关文章:

  • 持续开放,腾讯TARS、TSeer助力Linux建设开源社区
  • 探索 JS 中的模块化
  • 跟我一起学docker(四)--容器的基本操作
  • Ubuntu安装jdk
  • python全栈开发 * 19 面向对象 知识点汇总 * 180701
  • replace 使用正则
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • 三菱加工中心CNC编程G代码讲解
  • MongoDB可视化工具--Robo 3T 使用教程
  • Php数据库
  • 项目集成springboot【JWordpres前台项目实战】
  • Sublime Text3 配置
  • ALTER SYSTEM ARCHIVELOG CURRENT挂起案例
  • Mblog 部署手册
  • iOS组件化(一):创建本地私有库
  • python3.6+scrapy+mysql 爬虫实战
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • co模块的前端实现
  • Docker 1.12实践:Docker Service、Stack与分布式应用捆绑包
  • Electron入门介绍
  • Java应用性能调优
  • LintCode 31. partitionArray 数组划分
  • MYSQL 的 IF 函数
  • Odoo domain写法及运用
  • Python_网络编程
  • Swoft 源码剖析 - 代码自动更新机制
  • Vue2 SSR 的优化之旅
  • 个人博客开发系列:评论功能之GitHub账号OAuth授权
  • 深入浏览器事件循环的本质
  • 数据仓库的几种建模方法
  • 微信开放平台全网发布【失败】的几点排查方法
  • 新书推荐|Windows黑客编程技术详解
  • 要让cordova项目适配iphoneX + ios11.4,总共要几步?三步
  • 一起参Ember.js讨论、问答社区。
  • 找一份好的前端工作,起点很重要
  • #图像处理
  • ()、[]、{}、(())、[[]]等各种括号的使用
  • (1)(1.13) SiK无线电高级配置(五)
  • (2)Java 简介
  • (4.10~4.16)
  • (二)换源+apt-get基础配置+搜狗拼音
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (免费领源码)python+django+mysql线上兼职平台系统83320-计算机毕业设计项目选题推荐
  • (未解决)macOS matplotlib 中文是方框
  • (一)Thymeleaf用法——Thymeleaf简介
  • (转)用.Net的File控件上传文件的解决方案
  • (轉貼) UML中文FAQ (OO) (UML)
  • **PHP二维数组遍历时同时赋值
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • 、写入Shellcode到注册表上线
  • .net core Swagger 过滤部分Api
  • .net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池
  • .NET 中选择合适的文件打开模式(CreateNew, Create, Open, OpenOrCreate, Truncate, Append)
  • .NET开发者必备的11款免费工具
  • .net流程开发平台的一些难点(1)