js如何同步執行代碼的簡單介紹

本文目錄一覽:

JS方法怎麼同步執行

方法1 內部用了var 表示內部變量 執行完一次後會自動釋放;

方法2 內的變量cc不能與方法1重名;

示例代碼如下 測試可以

html xmlns=””

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怎麼進行同步執行

**

* 解決異步加載問題

* */

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;

如何實現 javascript 「同步」調用 app 代碼

在 App 混合開發中,app 層向 js 層提供接口有兩種方式,一種是同步接口,一種一異步接口(不清楚什麼是同步的請看這裡的討論)。為了保證 web 流暢,大部分時候,我們應該使用異步接口,但是某些情況下,我們可能更需要同步接口。同步接口的好處在於,首先 js 可以通過返回值得到執行結果;其次,在混合式開發中,app 層導出的某些 api 按照語義就應該是同步的,否則會很奇怪——一個可能在 for 循環中使用的,執行非常快的接口,比如讀寫某個配置項,設計成異步會很奇怪。

那麼如何向 js 層導出同步接口呢?

我們知道,在 Android 框架中,通過 WebView.addJavascriptInterface() 這個函數,可以將 java 接口導出到 js 層,並且這樣導出的接口是同步接口。但是在 iOS 的 Cocoa 框架中,想導出同步接口卻不容易,究其原因,是因為 UIWebView 和 WKWebView 沒有 addJavascriptInterface 這樣的功能。同時,Android 這個功能爆出過安全漏洞,那麼,我們有沒有別的方式實現同步調用呢?我們以 iOS UIWebView 為例提供一種實現,WKWebView 和 Android 也可以參考。

為了找到問題的關鍵,我們看一下 iOS 中實現 js 調用 app 的通行方法:

首先,自定義 UIWebViewDelegate,在函數 shouldStartLoadWithRequest:navigationType: 中攔截請求。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

– (BOOL) webView:(UIWebView* _Nonnull)webView

shouldStartLoadWithRequest:(NSURLRequest* _Nonnull)request

navigationType:(UIWebViewNavigationType)navigationType {

if ([request.HTTPMethod compare:@”GET” options:NSCaseInsensitiveSearch] != NSOrderedSame) {

// 不處理非 get 請求

return YES;

}

NSURL* url = request.URL;

if ([url.scheme isEqualToString:@’YourCustomProtocol’]) {

return [self onMyRequest:request];

}

return YES;

}

這種做法實質上就是將函數調用命令轉化為 url,通過請求的方式通知 app 層,其中 onMyRequest: 是自定義的 request 響應函數。為了發送請求,js 層要建立一個隱藏的 iframe 元素,每次發送請求時修改 iframe 元素的 src 屬性,app 即可攔截到相應請求。

1

2

3

4

5

6

7

8

9

10

11

12

13

/**

* js 向 native 傳遞消息

* @method js_sendMessageToNativeAsync

* @memberof JSToNativeIOSPolyfill

* @public

* @param str {String} 消息字符串,由 HybridMessage 轉換而來

*/

JSToNativeIOSPolyfill.prototype.js_sendMessageToNativeAsync = function (str) {

if (!this.ifr_) {

this._prepareIfr();

}

this.ifr_.src = ‘YourCustomProtocol://__message_send__?msg=’ + encodeURIComponent(str); }

當 app 執行完 js 調用的功能,執行結果無法直接返回,為了返回結果,普遍採用回調函數方式——js 層記錄一個 callback,app 通過 UIWebView 的 stringByEvaluatingJavaScriptFromString 函數調用這個 callback(類似 jsonp 的機制)。

注意,這樣封裝的接口,天然是異步接口。因為 js_sendMessageToNativeAsync 這個函數會立即返回,不會等到執行結果發回來。

所以,我們要想辦法把 js 代碼「阻塞」住。

請回憶一下,js 中是用什麼方法能把 UI 線程代碼「阻塞」住,同時又不跑滿 CPU?

1

2

3

4

var async = false;

var url = ”;

var method = ‘GET’;brvar req = new XMLHttpRequest();br

req.open(method, url, async);brreq.send(null);

「同步」ajax(其實沒這個詞,ajax 內涵異步的意思)可以!在 baidu 的響應沒返回之前,這段代碼會一直阻塞。一般來說同步請求是不允許使用的,有導致 UI 卡頓的風險。但是在這裡因為我們並不會真的去遠端請求內容,所以不妨一用。

至此實現方式已經比較清楚了,梳理一下思路:

使用同步 XMLHttpRequest 配合特殊構造的 URL 通知 app層。

app 層攔截請求執行功能,將結果作為 Response 返回。

XMLHttpRequest.send() 返回,通過 status 和 responseText 得到結果。

那麼,如何攔截請求呢?大家知道,UIWebViewDelegate 是不會攔截 XMLHttpRequest 請求的,但是 iOS 至少給了我們兩個位置攔截這類請求——NSURLCache 和 NSURLProtocol。

一、NSURLCache 是 iOS 中用來實現自定義緩存的類,當你創建了自定義的 NSURLCache 子類對象,並將其設置為全局緩存管理器,所有的請求都會先到這裡檢查有無緩存(如果你沒禁掉緩存的話)。我們可以藉助這個性質攔截到接口調用請求,執行並返回數據。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

– (NSCachedURLResponse*) cachedResponseForRequest:(NSURLRequest *)request {

if ([request.HTTPMethod compare:@”GET” options:NSCaseInsensitiveSearch] != NSOrderedSame) {

// 只對 get 請求做自定義處理

return [super cachedResponseForRequest:request];

}

NSURL* url = request.URL;

NSString* path = url.path;

NSString* query = url.query;

if (path == nil || query == nil) {

return [super cachedResponseForRequest:request];

}

LOGF(@”url = %@, path = %@, query = %@”, url, path, query);

if ([path isEqualToString:@”__env_get__”]) {

// 讀環境變量

return [self getEnvValueByURL:url]; //*

} else if ([path isEqualToString:@”__env_set__”]) {

// 寫環境變量

return [self setEnvValueByURL:url];

}

return [super cachedResponseForRequest:request];

}

注意注釋有 * 號的一行,即是執行 app 接口,返回結果。這裡的結果是一個 NSCachedResponse 對象,就不贅述了。

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/253003.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-14 02:15
下一篇 2024-12-14 02:15

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    編程 2025-04-29
  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • Python字符串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字符串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字符串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述,力求讓讀者深刻理解Python基礎代碼。通過本文的學習,相信大家對Python的學習和應用會更加輕鬆和高效。 一、變量和數…

    編程 2025-04-29
  • Python簡單數學計算

    本文將從多個方面介紹Python的簡單數學計算,包括基礎運算符、函數、庫以及實際應用場景。 一、基礎運算符 Python提供了基礎的算術運算符,包括加(+)、減(-)、乘(*)、除…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在着手設計之前,我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面: 1、庫存管…

    編程 2025-04-29
  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面,為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手,選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    編程 2025-04-29
  • Python實現簡易心形代碼

    在這個文章中,我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹,逐步深入了解如何實現這一任務。 一、安裝Python …

    編程 2025-04-29
  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中,我們不可避免地需要編寫一些長段代碼,包括函數、類、複雜的控制語句等等。在編寫這些代碼時,我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    編程 2025-04-29

發表回復

登錄後才能評論