{"id":8833,"date":"2022-05-09T16:59:21","date_gmt":"2022-05-09T08:59:21","guid":{"rendered":"https:\/\/sdeno.com\/?p=8833"},"modified":"2022-05-09T17:05:48","modified_gmt":"2022-05-09T09:05:48","slug":"rxjs-%e4%b9%8b%e4%ba%8e%e5%bc%82%e6%ad%a5%ef%bc%8c%e5%b0%b1%e5%83%8f-jquery%e6%93%8d%e4%bd%9cdom%e4%b8%80%e6%a0%b7%e6%93%8d%e4%bd%9cevent%e4%ba%8b%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8833","title":{"rendered":"RxJS \u4e4b\u4e8e\u5f02\u6b65\uff0c\u5c31\u50cf JQuery\u64cd\u4f5cdom\u4e00\u6837\u64cd\u4f5cevent\u4e8b\u4ef6"},"content":{"rendered":"
<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/05\/Rx_Logo_S.png\"<\/figure>\n

\u53ef\u4ee5\u7406\u89e3RxJS\u662fjs\u4e8b\u4ef6\u754c\u7684lodash\u3002<\/p>\n

cdn\uff1a<\/p>\n

<script src=\"https:\/\/cdn.bootcdn.net\/ajax\/libs\/rxjs\/7.5.5\/rxjs.umd.min.js\"><\/script><\/pre>\n
 <\/p>\n
Es6<\/p>\n
npm install vue vue-rx rxjs --save\r\n\r\n\r\nimport\u00a0Vue\u00a0from\u00a0'vue'\r\nimport\u00a0VueRx\u00a0from\u00a0'vue-rx'\r\n\r\nVue.use(VueRx)<\/pre>\n
 <\/p>\n
 <\/p>\n
\u7b80\u5355\u6848\u4f8b\uff1a<\/p>\n
\u4e00\u6b21\u58f0\u660e\u591a\u4e2a\u5f02\u6b65\u4ee3\u7801<\/p>\n
\/\/ stream$\u5c3e\u90e8\u7684$\u662f\u8868\u793a\u5f53\u524d\u8fd9\u4e2a\u53d8\u91cf\u662f\u4e2aovservable\r\n const stream$ = new rxjs.Observable.create(subscriber => {\r\n   setTimeout(() => {\r\n     subscriber.next([1, 2, 3]);\r\n   }, 500);\r\n   setTimeout(() => {\r\n     subscriber.next({ a: 1000 });\r\n   }, 1000);\r\n   setTimeout(() => {\r\n     subscriber.next(\"end\");\r\n   }, 3000);\r\n   setTimeout(() => {\r\n     subscriber.complete();\r\n   }, 2000);\r\n });\r\n\r\n\r\n \/\/ \u542f\u52a8\u6d41\r\n const subscription = stream$.subscribe({\r\n   complete: () => console.log(\"done\"),\r\n   next: v => console.log(v),\r\n   error: () => console.log(\"error\")\r\n });\r\n \r\n\/\/ [1,2,3]  \/\/ 500ms\u65f6\r\n\/\/ {a:1000} \/\/ 1000ms\u65f6\r\n\/\/ end \/\/ 3000ms\u65f6\r\n\/\/ done \/\/ 4000ms\u65f6<\/pre>\n
 <\/p>\n
 <\/p>\n
\u6267\u884c\u987a\u5e8f<\/p>\n
var observable = rxjs.Observable.create(function (observer) {\r\n  observer.next(1);\r\n  observer.next(2);\r\n  observer.next(3);\r\n  setTimeout(() => {\r\n    observer.next(4);\r\n    observer.complete();\r\n  }, 1000);\r\n});\r\n\r\nconsole.log('just before subscribe');\r\nobservable.subscribe({\r\n  next: x => console.log('got value ' + x),\r\n  error: err => console.error('something wrong occurred: ' + err),\r\n  complete: () => console.log('done'),\r\n});\r\nconsole.log('just after subscribe');\r\n\r\n\r\n\/\/just before subscribe\r\n\/\/got value 1\r\n\/\/got value 2\r\n\/\/got value 3\r\n\/\/just after subscribe    \/\/\u540e\u9762\u4ee3\u7801\u4f1a\u7ee7\u7eed\u6267\u884c\r\n\/\/got value 4\r\n\/\/done<\/pre>\n
 <\/p>\n
 <\/p>\n
complete()\u540e\u7684\u4ee3\u7801\u4e0d\u6267\u884c<\/p>\n
var observable = Rx.Observable.create(function subscribe(observer) {\r\n  observer.next(1);\r\n  observer.next(2);\r\n  observer.next(3);\r\n  observer.complete(); \/\/\u4e00\u65e6\u6267\u884ccomplete\uff0c\u5c31\u7ed3\u675f\u4e86\r\n  observer.next(4); \/\/ \u56e0\u4e3a\u8fdd\u53cd\u89c4\u7ea6\uff0c\u4e0d\u4f1a\u6267\u884c\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
\u4e2d\u9014\u505c\u6b62<\/p>\n
var observable = rxjs.Observable.create(function (observer) {\r\n    observer.next(1);\r\n    observer.next(2);\r\n    observer.next(3);\r\n    setTimeout(() => {\r\n      observer.next(4);\r\n    }, 1000);\r\n\r\n    setTimeout(()=>{\r\n      observer.complete();\r\n    },2000)\r\n\r\n  });\r\n\r\n\r\n var run = observable.subscribe({\r\n    next: x => console.log('got value ' + x),\r\n    error: err => console.error('something wrong occurred: ' + err),\r\n    complete: () => console.log('done'),\r\n  });\r\n\r\n  setTimeout(()=>{\r\n    run.unsubscribe()  \r\n  },1500)\r\n  \r\n  \r\n\/\/got value 1\r\n\/\/got value 2\r\n\/\/got value 3\r\n\/\/got value 4<\/pre>\n
 <\/p>\n
 <\/p>\n
\u5916\u90e8\u8c03\u7528\uff1a<\/p>\n
var subject = new rxjs.Subject();\r\n\r\n\r\n  document.getElementById('x').onclick=function (){\r\n    subject.next(1);\r\n  }\r\n  \r\n  setTimeout(()=>{\r\n    subject.next(2);\r\n  },1000)\r\n\r\n\r\n\r\n  subject.subscribe({\r\n    next: (v) => console.log('\u503c: ' + v)\r\n  });<\/pre>\n
 <\/p>\n
 <\/p>\n
\u4e2d\u6587\u5b98\u7f51\uff1ahttps:\/\/cn.rx.js.org\/<\/a><\/p>\n
rxjs\u6574\u5408vue\u63d2\u4ef6vue-rx\u5b98\u7f51\uff1ahttps:\/\/github.com\/vuejs\/vue-rx<\/a><\/p>\n
vue-rx\u6848\u4f8b\uff1ahttps:\/\/blog.csdn.net\/kuangshp128\/article\/details\/81561307<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u53ef\u4ee5\u7406\u89e3RxJS\u662fjs\u4e8b\u4ef6\u754c\u7684lodash\u3002 cdn\uff1a <script src=”https:\/\/cdn […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8833","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8833"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8833\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}