导航:首页 > 知识科普 > js中的方法怎么变成同步的

js中的方法怎么变成同步的

 发布时间：2023-04-27 18:12:17

❶ JS方法怎么同步执行

方法1 内部用了var 表示内部变量 执行完一次后会自动释放；

方法2 内的变量cc不能与方法1重名；
示例代码如下 测试可以
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
var str='';
function cfun(obj) { str += obj.value; }
function selall(){
var cc = document.getElementsByTagName("input");
for (var i = 0; i < cc.length; i++) {
cfun(cc[i]);
}
alert(str);
}
</script>
</head>
<body>源燃
<雹蠢虚input type="text" id="txt1" value="你好" />
<input type="text" id="档御txt2" value="朋友" />
<a href="javascript:selall()">点击显示</a>
</body>
</html>

❷ js怎么将一个异步程序强制转换成同步程序

相对于之前Begin/End模式和事件模式，猛扰async/await模式让程序员得腔和以用同步的伍知盯代码结构进

❸ js怎么进行同步执行

**

* 解决异历春步加载问题

* */

function promise1(fun){

        this.fun1=function(){}

        this.fun2=function(){}

        try{

            fun(this.sol);

        }catch(err){

           

        }   

}

promise1.prototype={

fun1:function(){},

        fun2:function(){},

    sol:function(res){

        setTimeout(function(){

            promise1.prototype.fun1(res)

            promise1.prototype.fun2(res)

        },0)

   陆烂察 },

    then:function(fun1){

        promise1.prototype.fun1=fun1;

        return this

    },

    err:function(fun2){

        promise1.prototype.fun2=fun2;

    }

}

/**

*方法使用：方法1比方法2先执行

**/

new promise1(function(door){

functionA(door); //方法1

}).then(function(){

functionB();       早茄 //方法2

});

    functionA : fucntion(){

door;

} 

❹ js中如何实现函数的同步调用

用jquery$.ajax({
url:url,
data:para,
dataType: 'json',
async:false,//(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同册橡步请求，请迟悔将此选项设置为 false。注意，同步州旦旁请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
success: function(data){}});

❺ JS代码同步文本框内容的实例方法

这篇文章介绍了JS代码同步文本框内容的方法 有需要的朋友可以参考一下

HTML代码

复制代码 代码如下: <> <head> <script> //同步函数 function synchronize(){ document getElementById( i ) value =document getElementById( i ) value; //alert("同步成功"); } //执行同步 setInterval(synchronize );//同步的时间间隔 每 秒同步一次 </script> </head> <body> 在第二个输入框中输入字符 会自动同步到第一个输入框 <br/><br/> 第一个输入框 <input type=text size=" " id="i " name=first><br/><br/> 第二个输入框 <input type=text size=" " id="i " name=second> </body> </>

把上面的HTML代码保存成格式文件 用浏览器打开 就可以看到效果了 注意 有些浏览器晌告为了安全起见 禁止执宴乎明行本地脚本 请点击“运行”即可 再查找资料的过程中 发现不顷凳仅仅change事件可以处理 其他事件也可以处理 例如 keyup事件等 这里再贴一下另外连个例子片段

复制代码 代码如下: lishixin/Article/program/Java/JSP/201311/20308

❻ 怎样用JS实现异步转同步

源起

小飞是一名刚入行前端不久的新人，因为进到了某个大公司，俨然成为了学弟学妹眼中'大神'，大家遇到js问题都喜欢问他，这不，此时他的qq弹出了这样一条消息

"hi,大神在吗？我有个问题想问，现在我们的代码里面有这样的东西,可是得不到正确的返回结果

1234567functiongetDataByAjax () {return$.ajax(...postParam)}vardata = getDataByAjax()if(data) {console.log(data.info)}

"哦，你这里是异步调用，不能直接获得返回值，你要把if语句写到回调函数中",小飞不假思索的说到，对于一个‘专业’的fe来说，这根本不是一个问题。
“可是我希望只是改造getDataByAjax这个方法，让后面的代码成立。”
“研究这个没有意义，异步是js的精髓，同步的话会阻塞js调用，超级慢的，但是你要一再坚持的话，用async:true就好了”
“不愧是大神，我回去立刻试一试，么么哒”

两天后，她哭丧着脸登上了qq
“试了一下你的方法，贺孙但是根本行不通，哭~~”
“别急，我看看你这个postParam的参数行吗”

123456{...dataType:'jsonp',async:true...}

"这是一个jsonp请求啊，老掉牙的东西了，，jsonp请求是没有办法同步的"
“我知道jsonp请求的原理是通过script标签实现的，但是，你看，script也是支持同步的呀，你看tags/attscriptasync.asp”
“额，那可能是jquery没有实现吧，哈哈”
“大神，你能帮我实现一个jsonp的同步调用方式嘛，拜托了(星星眼)”
虽然他有点奇怪jquery为什么没有实现，但是既然w3school的标准摆在那里，码两行代码又没什么，

loadJsonpSync = (url) => {varresult;window.callback1 = (data) => (result = data)lethead = window.document.getElementsByTagName('head')[0]letjs = window.document.createElement('script')js.setAttribute('type','text/javascript')js.setAttribute('async','sync')// 这句显式声明强调src不是按照异步方式调用的js.setAttribute('src', url)head.appendChild(js)returnresult}

额，运行起来结果竟然是undefined！w3cshool的文档竟然也不准，还权威呢，我看也不怎么着，小飞暗自想到。

“刚才试了一下，w3school文档上罩隐写的有问题，这个异步属性根本就是错的”
“可是我刚还试过一次这个，我确认是好的呀”

12<script src="loop50000 && put('frist').js"></script><script src="put('second').js"></script>

(有兴趣的同学可以实现以下两个js，并且加上async的标签进行尝试。)
“这个，我就搞不清楚了”，小飞讪讪的说到
对方已离线

抽象

关于这个问题，相信不只是小飞，很多人都难以解答。为什么ajax可以做到同步，但jsonp不行，推广到nodejs上，为什么readFile也可以做到同步(readFileSync)，但有的库却不行。
（至于script的async选项我们暂时避而不谈，是因为现在的知识维度暂时还不够物拍厅，但是不要着急，下文中会给出明确的解释）
现在，让我们以计算机科学的角度抽象这个问题：

我们是否可以将异步代码转化为同步代码呢？(ASYNCCALL => SYNCCALL)

既然是抽象问题，那么我们就可以不从工程角度/性能角度/实现语言等等等方面来看(同步比异步效率低下),每增加一个维度，复杂程度将以几何爆炸般增长下去。

首先，我们来明确一点，==在计算机科学领域==同步和异步的定义

同步（英语：Synchronization），指对在一个系统中所发生的事件（event）之间进行协调，在时间上出现一致性与统一化的现象。在系统中进行同步，也被称为及时（in time）、同步化的（synchronous、in sync）。--摘自网络
异步的概念和同步相对。即时间不一致，不统一

明确了这一点，我们可以借助甘特图来表示同步和异步

注意看我们标红的地方，如果你完成了小测验1，就会得到和这张图一致的顺序

==同步执行的代码片段必然在异步之前。==

所以，无论从理论还是实际出发，我们都不得不承认，在js中，把异步方法改成同步方法这个命题是水月镜花

哦对了，最后还需要解释一下最开始我们埋下的坑， 为什么jsonp中的async没有生效，现在解释起来真的是相当轻松，即document.appendChild的动作是交由dom渲染线程完成的，所谓的async阻塞的是dom的解析，而非js引擎的阻塞。实际上，在async获取资源后，与js引擎的交互依旧是push taskQueue的动作，也就是我们所说的async call

推荐阅读： 关于dom解析请大家参考webkit技术内幕第九章资源加载部分

峰回路转

相信很多新潮的同学已经开始运用切了async/await语法，在下面的语法中，getAjax1和console之间的具有同步的特性

1234asyncfunction() {vardata = await getAjax1()console.log(data)}

讲完了event loop和异步的本质，我们来重新审视一下async/await。
老天，这段代码亲手推翻了==同步执行的代码片段必然在异步之前。== 的黄金定律！
惊不惊喜，意不意外，这在我们的模型里如同三体里的质子一样的存在。我们重新审视了一遍上面的模型，实在找不到漏洞，找不到任何可以推翻的点，所以真的必须承认，async/await绝对是一个超级神奇的魔法。
到这里来看我们不得不暂时放弃前面的推论，从async/await本身来看这个问题
相信很多人都会说，async/await是CO的语法糖，CO又是generator/promise的语法糖，好的，那我们不妨去掉这层语法糖，来看看这种代码的本质, 关于CO，读的人太多了，我实在不好老生常谈，可以看看这篇文章，咱们就直接绕过去了,这里给出一个简易的实现
/5800210.html

functionwrap(wait) {variteriter = wait()const f = () => {const { value } = iter.next()value && value.then(f)}f()}function*wait() {varp = () =>newPromise(resolve => {setTimeout(() => resolve(), 3000)})yieldp()console.log('unlock1')yieldp()console.log('unlock2')console.log('it's sync!!')}

终于，我们发现了问题的关键，如果单纯的看wait生成器(注意，不是普通的函数)，是不是觉得非常眼熟。这就是我们最开始提出的spinlock伪代码！！！
这个已经被我们完完全全的否定过了，js不可能存在自旋锁，事出反常必有妖，是的，yield和*就是表演async/await魔法的妖精。
generator和yield字面上含义。Gennerator叫做生成器，yield这块ruby，python，js等各种语言界争议很大，但是大多数人对于‘让权’这个概念是认同的(以前看到过maillist上面的争论，但是具体的内容已经找不到了)

扩展阅读---ruby元编程 闭包章节yield(ruby语义下的yield)

所谓让权，是指cpu在执行时让出使用权利，操作系统的角度来看就是‘挂起’原语，在eventloop的语义下，似乎是暂存起当时正在执行的代码块(在我们的eventloop里面对应runPart)，然后顺序的执行下一个程序块。
我们可以修改eventloop来实现让权机制

小测验2 修改eventloop使之支持yield原语

至此，通过修改eventloop模型固然可以解决问题，但是，这并不能被称之为魔法。

和谐共存的世界

实际上通过babel，我们可以轻松的降级使用yield,（在es5的世界使用让权的概念！！）
看似不可能的事情，现在，让我们捡起曾经论证过的
==同步执行的代码片段必然在异步之前。== 这个定理，在此基础上进行进行逆否转化

==在异步代码执行之后的代码必然不是同步执行的(异步的)。==

这是一个圈子里人尽皆知的话，但直到现在他才变得有说服力（我们绕了一个好长的圈子）
现在，让我们允许使用callback，不使用generator/yield的情况下完成一个wait generator相同的功能！！！

functionwait() {const p = () => ({value:newPromise(resolve => setTimeout(() => resolve(), 3000))})letstate = {next: () => {state.next = programPartreturnp()}}functionprogramPart() {console.log('unlocked1')state.next = programPart2returnp()}functionprogramPart2() {console.log('unlocked2')console.log('it's sync!!')return{value: void 0}}returnstate}

太棒了，我们成功的完成了generator到function的转化(虽然成本高昂)，同时，这段代码本身也解释清楚了generator的本质，高阶函数，片段生成器，或者直接叫做函数生成器！这和scip上的翻译完全一致,同时拥有自己的状态(有限状态机)

推荐阅读 计算机程序的构造和解释 第一章generator部分
小测验3 实际上我们提供的解决方式存在缺陷，请从作用域角度谈谈

其实，在不知不觉中，我们已经重新发明了计算机科学中大名鼎鼎的CPS变换
Continuation-passing_style

最后的最后，容我向大家介绍一下facebook的CPS自动变换工具--regenerator。他在我们的基础上修正了作用域的缺陷，让generator在es5的世界里自然优雅。我们向facebook脱帽致敬！！egenerator

后记

同步异步 可以说是整个圈子里面最喜欢谈论的问题，但是，谈来谈去，似乎绝大多数变成了所谓的‘约定俗称’，大家意味追求新技术的同时，却并不关心新技术是如何在老技术上传承发展的，知其然而不知其所以然，人云亦云的写着似是而非的js。

==技术，不应该浮躁==

PS: 最大的功劳不是CO，也不是babel。regenerator的出现比babel早几个月，而且最初的实现是基于esprima/recast的，关于resprima/recast,国内似乎了解的并不多，其实在babel刚刚诞生之际， esprima/esprima-fb/acron 以及recast/jstransfrom/babel-generator几大族系围绕着react产生过一场激烈的斗争，或许将来的某一天，我会再从实现细节上谈一谈为什么babel笑到了最后~~~~

阅读全文

与js中的方法怎么变成同步的相关的资料

热点内容
精密度的表示方法通常用 浏览：760
社会调查研究方法第二章 浏览：91
海蟹黄咸鸭蛋黄的食用方法 浏览：601
小孩胯骨滑膜炎的最佳按摩方法 浏览：644
三吨电子磅的正确校正方法 浏览：902
蔓薇西梅使用方法 浏览：227
排烟风口与短管连接方法 浏览：705
姚桐斌研究的方法 浏览：739
引伸计安装方法 浏览：618
吉娃娃手机使用方法 浏览：849
安卓系统通讯录设置在哪里设置方法 浏览：815
怎么备孕最好方法 浏览：812
颈椎病治疗方法用什么中药治 浏览：247
水钻打空调眼儿使用方法视频 浏览：819
口腔颌面肿瘤治疗方法 浏览：960
冲成人奶粉的正确方法 浏览：194
404x125的简便运算方法 浏览：10
水泥多孔砖砌墙方法图片 浏览：705
孢谷草种植方法 浏览：283
莴笋青菜种植方法 浏览：736