setInterval中this

【setInterval中this】的更多相关文章

今天使用react做钟表,自然用到了setInterval,但是出现this指向不明的问题. <html> <head> <meta charset="UTF-8" /> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://c…

我们都知道,定时器里面想返回值如果你用return根本没作用,那么怎么拿到定时器所返回的值呢, 现在只需要利用回调函数,给主函数传一个函数类型的参数callback,然后把想要返回的num再传给callback, 这时候callback就拿到了这个num值 let myTimer = function (callback) { let height = 10; let flag = true; let time= setInterval(function () { height--; conso…

关于setInterval和setTImeout中的this指向问题

前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); }, this.getNumLater = function(){ setTimeout(function(){ console.log(this.num)…

【转】JS中setTimeout和setInterval的最大延时值详解

前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTimeout和setInterval最大延时值的相关问题,需要的朋友们下面来一起学习学习吧. 先来看这样一段代码: function update() { loadData().then(function(data) { $('#content').html(data.content); var de…

JavaScript中setInterval关闭问题

这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var timer=setInterval(function(){ if(i===10) { console.log("关闭定时器"); clearInterval(timer); } console.log("第"+i+"次调用"); i++; },100…

【原】理解javascript中的this

最近的文章基本都是总结javascript基础内容的,因为我觉得这些东西很重要.而且很多时候你觉得你理解了,其实并没有你自认为的那么理解.十月份没怎么写文章,因为国庆出去玩的比较久,心变野了,现在是时候重新回到学习的轨迹了,今天要总结的是javascript中的this. 介绍this之前,先来两句话,这两句话比较重要,可以说贯穿全文. 1.this的最终指向的是那个调用它的对象 2.如果一个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象下面通过一些…

setTimeout和setInterval的各自使用场景

默认的 setTimeout 只执行一次, 清除用clearTimeout setInterval 每间隔指定的时间, 就执行一次, 清除用clearInterval 但是, setTimeout也可以用来执行每隔一定时间间隔就执行一次, 方法是在函数内部使用 "递归"的调用. foo(); //调用一次foo函数 function foo(){ // 函数主体 // ... 该数据处理的, 执行数据处理; // ... 该输出的, 就输出 // ... 该显示的, 你显示 //…

修改setInterval作用域

Hello,今天和大家分享如何修改setInterval作用域. 0.引子最近在做一个项目的时候需要开发一个图片轮播显示的组件,在实现过程中遇到了关于setInterval作用域的问题. SlidePicture.prototype={ constructor:SlidePicture, init:function(){ //初始化函数 this.autoPlay(); }, slidePic:function(){ //滑动图片具体实现 //省略实现代码 console.log('durat…

JavaScript中的该如何[更好的]做动效

在用js写动画的时候,无非使用 setTimeout/setInterval 或者 requestAnimationFrame 来处理动画(在jquery的代码里也是这么干的),本文主要为了记录下两者的区别及使用两者来实现动过程. 以实现一个简单的滚动到顶部为例 setInterval setInterval() 方法重复调用一个函数或执行一个代码段,在每次调用之间具有固定的时间延迟.返回一个intervalID,可用于 cancelInterval 达到结束循环的效果. setTimeout…

node.js之setTimeout()、clearTimeout()与 setInterval()与clearInterval()

1.setTimeout函数与clearTimeout函数 setTimeout(cb,ms,[arg],[...])延时一定时间执行回调函数该函数中cb参数为必填函数,为需要执行的回调函数ms为经过多少毫秒后执行回调函数从第三个参数开始为需要向回调函数中传入的参数 clearTimeout(cb)取消setTimeout中回调函数的调用,参数只能为setTimeout中的所返回的定时器对象 2.setInterval函数与clearInterval函数 setInterval(cb,ms,[a…

js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）

javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环事件循环中的同步任务,异步任务: 同步和异步任务在不同的执行"场所",同步的进入主线程,异步的进入Event Table执行并注册函数. 当指定的异步事情完成时,Event Table会将这个函数移入Event Queue. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,推…

【面试篇】寒冬求职季之你必须要懂的原生JS(中)

互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在,很显然是不行了.本文梳理出了一些面试中有一定难度的高频原生JS问题,部分知识点可能你之前从未关注过,或者看到了,却没有仔细研究,但是它们却非常重要. 本文将以真实的面试题的形式来呈现知识点,大家在阅读时,建议不要先看我的答案,而是自己先思考一番.尽管,本文所有的答案,都是我在翻阅各种资料,思考并验…

你可能不知道的setInterval的坑

你可能不知道的setInterval的坑之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么.今天去摸索了下之后,决定来做个记录以免自己忘记,也希望让更多人了解到这个坑. 坑的地方 setInterval会无视代码的错误.就算遇到了错误,它还是会一直循环下去,不会停止.这就导致了可能你代码里存在着一些问题(比如你的代码可能有个一定概率下会发生的错误,而你使用setinterval来循环调用它,由于setinterval不会因为报错停止,所以这个问题可能被隐藏),可是…

普通函数跟箭头函数中this的指向问题

箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (常见的window的属性和方法有: alert, lo…

JavaScript中该如何[更好的]做动效

在用js写动画的时候,无非使用 setTimeout/setInterval 或者 requestAnimationFrame 来处理动画(在jquery的代码里也是这么干的),本文主要为了记录下两者的区别及使用两者来实现动过程. 以实现一个简单的滚动到顶部为例 setInterval setInterval() 方法重复调用一个函数或执行一个代码段,在每次调用之间具有固定的时间延迟.返回一个intervalID,可用于 cancelInterval 达到结束循环的效果. setTimeout…

如何用setInterval调用类的方法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 近日在编写程序时发现调用setInterval传入的方法时,在程序间隔调用时无法获取正确的类方法,究其原因是由于JS灵活的this指针重绑定导致的.那么this指针为什么会重绑定,又重绑定到哪里去了呢?se…

再次讨论javascript 中的this

原文: http://www.jb51.net/article/77519.htm 核心总结: 1.不论函数在哪里被调用,只要没有指定调用方,则this都指向window.指定了调用方,就指向调用方.(参考:http://www.cnblogs.com/liuyongjia/p/7661382.html) 2.作为构造函数中调用,this指向新生成的对象. 分析一下:setTimeout和setInterval bind的作用就是给函数一个指定的thisArg,经常使用bind的地方就是setT…

JS中的箭头函数与this

转载自:https://juejin.im/post/5aa1eb056fb9a028b77a66fd#heading-1 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进.this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系. 一.JS中函数的写法 1.常规函数的写法在ES6语法之前,JS中的函数由function关键字.params参数和被花括号…

【知识】定时器setTimeout/setInterval执行时this指针指向问题

[问题描述] setTimetout/setInterval中this指针指向window,以下是一个小demo: var demoChange = { key: true, changeFun() { console.log('调用函数'): this.key = true; }, init() { setInterval(function () { if (this.key) { // 此处会报出this.key is undefined 的错误 this.key = false; this…

JavaScript--函数中（）的作用

在函数中参数是函数的时候:function a(函数名) 与 function a(函数名()) 的区别: // 在函数里面() 是一个编组和立即执行的功能 /** * function autoPlay() {自动跳转代码} * */ // setInterval(autoPlay,3000); 如果在setInterval中:setInterval(autoPlay(),3000);会导致autoPlay立即执行,而不是3秒后执行所以由于autoPlay()的优先级高,所以要使用setIn…

[Canvas前端游戏开发]——FlappyBird详解

一直想自己做点小东西,直到最近看了本<HTML5游戏开发>,才了解游戏开发中的一点点入门知识. 本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘 :也可以参考github,里面有更多的游戏样例. 游戏截图 HTML5之Canvas Canvas是Html5中用于绘图的元素,它可以绘制各种图形,比如长方形,多边形,圆形等等.如果想要了解Canvas的使用可以参考: http://www.w3school.com.cn/tags/html_ref_canvas.a…

Javascript模式（第四章函数）------读书笔记

一背景 js函数的两个特点:1 函数是第一类对象(first-class object):2 函数可以提供作用域 1 函数是对象: 1 函数可以在运行时动态创建,还可以在程序执行过程中创建 2 可以被赋值给变量,还可以被删除 3 可以作为参数传递给别的函数,可以作为返回值,被别的函数返回, 4 可以拥有自己的属性和方法 2 由于JS没有块级作用域的概念,因此在涉及到控制变量作用域的时候,函数是必不可少的工具 1.1 消除术语歧义:我们来看一下命名函数表达式.你们函数表达式以及函数声明的定义 1…

选项卡切换：自动定时&主动触发事件

最初学习的是手动触发事件,添加的是onmouseover,其中index是关键,tab标签与现实内容的div索引一一对应,遍历tab标签,当鼠标移动到某标签时,触发对应的内容div显示.for(var i=0;i<img.length;i++){ img[i].index=i; img[i].onmouseover=function(){ for(var i=0;i<img.length;i++){ img[i].className=""; content_div[i].c…

AngularJS笔记---数据绑定

一.数据绑定 1.简单绑定下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 B.ng-models : 用于数据绑定, 也就是两个input的里面输入的信息都会绑定到val1和val2变量里面. C.{{ FiledName }}: 双括号也是用于数据的绑定. <!DOCTYPE html> <html> <script src="angul…

JavaScript单元测试框架-Jasmine

Jasmine的开发团队来自PivotalLabs,他们一开始开发的JavaScript测试框架是JsUnit,来源于著名的JAVA测试框架JUnit.JsUnit是xUnit的JavaScript实现.但是JsUnit在2009年后就已经停止维护了,他们推出了一个新的BDD框架Jasmine.Jasmine不依赖于任何框架,所以适用于所有的Javascript代码. 所谓BDD(行为驱动开发,Behaviour Driven Development),是一种新的敏捷开发方法.Dan North…

使用bind(this)的情况

1.setInterval().setTimeout()的回调函数,一定要加.bind(this)方法. 原因是:在setInterval()中定义的回调函数,是在同步代码执行完后,随着事件触发来异步执行的,此时函数的上下文Context已经由定义该函数的Script文件变为全局变量,如果不通过bind(this)来指定由组件实例作为上下文的话,回调函数中的this会指向全局变量中的Window变量,显然不是我们想要的结果. 2.Ajax的回调函数,一定要加.bind(this)方法. 若不通过…

《jQuery风暴》第2章必须知道的JavaScript知识

第2章必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部, 而是讲解其精髓,这些知识可以提升大家的JavaScript内功.切忌,要修炼上乘的武功,必须要有深厚的内功基础,否则只可学到其招式而发挥不了功力.JavaScript实际上包括三部分: w ECMAScript 描述了该语言的语法和基本对象. w DOM 描述了处理网页内容的方法和接口.…

【JavaScript】【译】编写高性能JavaScript

英文链接:Writing Fast, Memory-Efficient JavaScript 很多JavaScript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执行的大型JavaScript应用所设计的.如果你是一个开发者,并且关心内存使用情况与页面性能,你应该了解用户浏览器中的JavaScript引擎是如何运作的.无论是V8,SpiderMonkey的(Firefox)的Carakan(Opera),Chakra(IE)或其他引擎,这样做可以帮助你更好地优…

编写高性能JavaScript【转】

英文链接:Writing Fast, Memory-Efficient JavaScript 很多JavaScript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执行的大型JavaScript应用所设计的.如果你是一个开发者,并且关心内存使用情况与页面性能,你应该了解用户浏览器中的JavaScript引擎是如何运作的.无论是V8,SpiderMonkey的(Firefox)的Carakan(Opera),Chakra(IE)或其他引擎,这样做可以帮助你更好地优…

用原生javascript模拟经典FC游戏公路争霸

#用原生javascript模拟经典FC游戏公路争霸前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p/3537718.html)一时兴起,自己也搞了一个小游戏,练习一下自己的js,dom及游戏编程的思维其中还参考了 [另外一个汽车游戏](http://wd.jb51.net:81/200910/yuanma/car_game_js.rar) 在此说一下过程中一些细节吧 **油门**功能的实现是其…