導航:首頁 > 知識科普 > 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中的方法怎麼變成同步的相關的資料

熱點內容
突然陽痿治療方法 瀏覽：766
如何製作磁場方法 瀏覽：875
注水旗桿的安裝方法 瀏覽：212
直鉤簡化計算方法 瀏覽：921
燙皮的製作方法和配料視頻 瀏覽：347
醉拳訓練方法視頻教程 瀏覽：89
果汁伴侶的使用方法 瀏覽：235
改寫人生的方法和技巧 瀏覽：980
2014簡單方法防小人 瀏覽：443
小米3流量設置在哪裡設置方法 瀏覽：542
交通分布預測的常用方法 瀏覽：29
常用焊接成型的工藝方法及應用 瀏覽：57
交流電的計算方法視頻 瀏覽：672
台秤及分析天平使用方法 瀏覽：5
有什麼方法把軟體轉移到內存卡上 瀏覽：607
菠蘿頭子的種植方法 瀏覽：977
語文中的論述方法有哪些 瀏覽：382
喔刷的使用方法圖解 瀏覽：351
思密達如何服用方法 瀏覽：131
檢測駕駛能力的方法 瀏覽：956