java中settimeout作用_关于setTimeout的妙用

定义

在指定的延迟时间之后调用一个函数或执行一个代码片段

这个是setTimeout最主要的功能,但也是很坑的地方,首先javascript其实是运行在单线程的环境下,意味者定时器会在未来的某个时间支持,但是具体的执行的时间并不能够很准确的运行,容易受到其它时间的影响,比如DOM的计算、事件的执行、各种函数的执行和运算。但是我们可以利用延迟执行的一些特性来达到我们想要的功能。、

window.setTimeout(callbask, delay, [param1, param2, ...])

函数节流

程序运行过程中对某个函数调用次数很多导致界面不断回流或者重排,这时候就需要对这个函数进行节流,比如监听touchmove、scroll事件等,可以限定函数在单位时间内只执行一次

var throttle = function(method, context) {

clearTimeout(method.tId);

method.tId= setTimeout(function(){

method.call(context);

},100);

}

控制执行

点击事件是会产生冒泡,执行的顺序是当前点击元素->父元素->...->document,一直往上执行到document。如果对当前元素的点击事件处理加上setTimeout的话,那么执行顺序就会改变为父元素->...->document->当前元素。这样就可以控制冒泡事件的执行顺序

var parent = document.getElementById("parent");var child = document.getElementById("child");

document.body.addEventListener("click", function(e) {

console.log("body");

},false);

parent.addEventListener("click", function(e) {

console.log("parent");

},false);

child.addEventListener("click", function(e) {

setTimeout(function() {

console.log("child");

},0);

},false);/**parent

*body

*child*/

构建一个轮询任务

javacsript中已经有一个开启轮询的方法,就是setInterval,但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间

比如有个轮询任务间隔是100ms,但是执行方法的时间需要450ms,那么在200ms、300ms、400ms本来是计划中执行任务的时间,浏览器发现第一个还未执行完,那么就会放弃2、3、4次的任务执行,并且在500ms之后再次执行任务,这样的话,其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔

setTimeout(function(){

alert(1);

setTimeout(arguments.callee,100);

},100)

分块处理耗时计算

浏览器给javascript的运行规定了内存和时间,假如javascript运行的时间超过了规定时间,那么浏览器就会''报错''

for(var i = 0; i < arr.length; i++){//耗时很久的嵌套循环或者运算

doSomeing(arr[i]);

}

假如在循环中做的处理的逻辑不是同步的话,那么可以把逻辑''分片''执行

sertTimeout(function(){var item =arr.shift();

dosomeing(item);if(arr.length <0){

setTimeout(arguments.callee,100);

}

},100);

延迟JS引擎的调用

GUI渲染线程和JS引擎的执行之间是互斥,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎执行完毕时立即被执行。这样的结果会导致新内容很晚才能渲染完成,很多时候我们需要让界面先渲染完成之后在去调用JS引擎来执行,那么可以使用setTimeout来延迟JS引擎的调用

var div = document.createElement('div');

div.setAttribute('style', 'background-color:#233; width:100px; height:100px');

document.body.appendChild(div);

setTimeout(function() {

alert(1);

},100);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574369.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中兴的一道笔试题

今天做了中兴的秋招题目&#xff0c;有一个题以前没有仔细想过&#xff0c;题目我有点儿记不清楚了&#xff0c;大概意思是这样的&#xff1a;有一个循环的单链表&#xff0c;给定该链表的尾指针比给定头指针好么&#xff1f; 我的思路&#xff1a;如下图&#xff0c;这是一个循…

Linux read 命令

Linux read命令用于从标准输入读取数值。 read 内部命令被用来从标准输入读取单行数据。这个命令可以用来读取键盘输入&#xff0c;当使用重定向的时候&#xff0c;可以读取文件中的一行数据。 语法 read [-ers] [-a aname] [-d delim] [-i text] [-n nchars] [-N nchars] […

放图片 java_java怎么在我想要的图片上在放一个我想要的图片

展开全部import javax.imageio.*;import javax.swing.*;import java.awt.*;import java.awt.event.*;import java.awt.geom.*;import java.io.*;import java.util.*;/*** author Hardneedl*/final class PicDemo extends JFrame {public String getTitle() {return "PicDe…

Ext-ajax请求数据

Ext.Ajax.request({url: webPath/news/newsEastmoneyList,method: POST,success: function (response, options) {var data Ext.decode(response.responseText);if(data.success){list.getStore().load({page:1});Ext.Msg.alert(提示,提取成功&#xff0c;共提取data.zg条.);}…

java .net des_DES加密解密 JAVA与.NET互通程序代码

JAVA版本import javax.crypto.Cipher;import javax.crypto.SecretKey;import javax.crypto.SecretKeyFactory;import javax.crypto.spec.DESKeySpec;import javax.crypto.spec.IvParameterSpec;public class Des {private byte[] desKey;//解密数据public static String decryp…

linux 查找文件或者服务

[rootlocalhost ~]# whereis mysql mysql: /usr/bin/mysql /usr/lib/mysql /usr/share/mysql /usr/share/man/man1/mysql.1.gz [rootlocalhost ~]# which mysql /usr/bin/mysql转载于:https://www.cnblogs.com/adolfmc/p/4749224.html

android java 调用js_android WebApp 集成方式怎么使用java调用js

WebAPP集成&#xff0c;本地打包&#xff0c;有两种方式java js通信1.DCloud插件模式&#xff0c;参考SDK DEMO的H5Plugin&#xff0c;Java:继承StandardFeature写接口。public class DBControlPlugin extends StandardFeature{public void PluginTestFunction(IWebview pWebvi…

Android SurfaceView实现静态于动态画图效果

本文是基于Android的SurfaceView的动态画图效果&#xff0c;实现静态和动态下的正弦波画图&#xff0c;可作为自己做图的简单参考&#xff0c;废话不多说&#xff0c;先上图&#xff0c; 静态效果&#xff1a; 动态效果&#xff1a; 比较简单&#xff0c;代码注释的也比较详细&…

java ip调天气预报接口_JAVA + WeatherWebService 实现天气预报接口调取

两步完成接口调取第一步&#xff1a;引入jar包若在线jar包失效&#xff0c;私信我即可。第二步&#xff1a;创建类实现在JAVA项目中创建java类(我的是&#xff1a;WeatherUtil)修改类中cityid为你需要展示的地区id,我的是上海的【cityid查询】WeatherUtil类代码&#xff1a;imp…

数学概念——J - 数论,质因数分解

J - 数论&#xff0c;质因数分解Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit StatusDescription Tomorrow is contest day, Are you all ready? We have been training for 45 days, and all guys must be tired.But , you are…

java map集合排序的_Java对Map集合进行排序

Java对Map集合进行排序实现 Comparator 接口&#xff0c;重写compare方法&#xff0c;完成自定义排序int compare(Object o1, Object o2) 返回一个基本类型的整型如果要按照升序排序,则o1 小于o2&#xff0c;返回-1(负数)&#xff0c;相等返回0&#xff0c;01大于02返回1(正数)…

java黄金分割点游戏_结对编程1——黄金点小游戏项目简介及需求分析

一、项目成员2018141461085龚泽楠2018141461012蔡铧荣二、项目名称黄金点小游戏三、项目简介游戏规则&#xff1a; N个同学( N通常大于 10 )&#xff0c;每人写一个 0~100 之间的有理数 (不包括 0或100) &#xff0c;交给裁判算出所有数字的平均值然后乘以 0.618 (所谓黄金分割…

STL泛型算法总结

泛型算法只是依赖于迭代器的操作&#xff0c;而不是依赖于容器 泛型算法可以分为3大类&#xff1a; 下面的vec和vec2代表相同类型的容器 1.只读算法&#xff1a;只允许读取其输入范围内的元素&#xff0c;而不改变元素 find(vec.cbegin(),vec.cend(),k) 查找算法&#xff1a;前…

java x锁_基于Java名称的锁?

MySQL具有方便的功能&#xff1a;SELECT GET_LOCK("SomeName")这可用于为应用程序创建简单但非常具体的基于名称的锁。但是&#xff0c;它需要数据库连接。我有很多情况&#xff0c;例如&#xff1a;someMethod() {// do stuff to user A for their data for feature…

HDU 2242 考研路茫茫——空调教室

考研路茫茫——空调教室 Time Limit: 2000msMemory Limit: 32768KBThis problem will be judged on HDU. Original ID: 224264-bit integer IO format: %I64d Java class name: Main众所周知&#xff0c;HDU的考研教室是没有空调的&#xff0c;于是就苦了不少不去图书馆的…

如何查看现有项目的struts和hibernate和spring版本

1. struts的版本信息 查看 struts.jar\META-INF\MANIFEST.MF再查看 Implementation-Version看后面的数字.. Manifest-Version: 1.0Specification-Title: Struts FrameworkClass-Path: commons-beanutils.jar commons-collections.jar commons-dig ester.jar commons-fileuploa…

java 正则表达式 组合_java基础:5.1 面向对象、类的关联 聚合 组合、正则表达式...

上一个礼拜太忙了&#xff0c;今天开始恢复java的学习~目录1、面向过程——面向对象的区别传统的面向过程式编程是动作驱动的&#xff0c;数据和动作是分离的。面向对象编程的范式重点在于对象&#xff0c;动作和数据一起定义在对象中。面向过程的范式重点在于设计方法。面向对…

html5学习之路_003

html布局 使用<div>元素布局使用<table>元素布局<div>元素布局 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>div布局</title><link rel"stylesheet" type&qu…

计算机二级 java和web_2020年全国计算机二级WEB程序复习知识点:JavaBean

【摘要】即将参加全国计算机等级考试的考生们&#xff0c;考试即将到来&#xff0c;大家的备考工作进行得如何了&#xff1f;考必过为大家精心整理了2020年全国计算机二级WEB程序复习知识点&#xff1a;JavaBean&#xff0c;希望能够助力全国计算机等级考试&#xff0c;相信坚持…

java表达式语句_Java基础知识笔记第三章:运算符表达式语句

算术运算符与表达式操作符描述例子加法 - 相加运算符两侧的值A B 等于 30-减法 - 左操作数减去右操作数A – B 等于 -10*乘法 - 相乘操作符两侧的值A * B等于200/除法 - 左操作数除以右操作数B / A等于2&#xff05;取余 - 左操作数除以右操作数的余数B%A等于0自增: 操作数的值…